Javascript « Arrêtez de taper » problèmes de minuterie

Question

Pour cette question, je l'ai fait une jsFiddle fonctionnelle: http://jsfiddle.net/KSCLC/

Je fais une simple page où vous numériser ou taper un code CUP et il ajoute automatiquement à une table à des fins d'affichage. J'ai mis au point du code pour démarrer une minuterie qui attend 3 secondes après la fin de la saisie, puis crée une nouvelle ligne dans ma table pour afficher les caractères UPC et les informations sur l'élément.

Ce code a cependant quelques problèmes. (mes questions)

A.) Lorsque vous tapez le CUP manuellement, la nouvelle action de ligne se produit plusieurs fois (plusieurs lignes sont insérées pour le même CUP). Mais lorsque vous numérisez le CUP avec un lecteur de codes-barres, action une fois. (qui est correct)

B.) Lorsque vous supprimez les informations du champ (rendre le champ upc vide), la nouvelle action de ligne se produit à nouveau mais insère une ligne vide. C.) J'ai essayé de rendre le champ upc vide après l'insertion de ligne, mais cela n'arrive pas. J'ai essayé de placer upc=''; après les insertions de rangée mais cela n'a pas fonctionné. Je définissais upc comme:

var upc=document.getElementById("UPC").value; 

(comme vous pouvez le voir ci-dessous et dans le jsFiddle.)

Alors maintenant, le code ...

Je viens d'utiliser une entrée simple pour le champ upc :

<input type="text" id="UPC" name="UPC" class="form-control scanning" autofocus="autofocus" placeholder="Scan or enter UPC here" /> 

et une table simple pour les articles scannés

<div class="scannedItems"> 
    <table class="table table-hover" id="ScannedItems"> 
     <thead> 
     <tr> 
      <th>UPC</th> 
      <th>Description</th> 
      <th>Price</th> 
      <th>Qty</th> 
      <th>Total</th> 
      <th>Actions</th> 
     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <td>8754621160</td> 
      <td>Example Product</td> 
      <td>$5.00</td> 
      <td>5lbs</td> 
      <td>$25.00</td> 
      <td> 
       <a><span class="glyphicon glyphicon-plus" style="padding-right:15px"></span></a> 
       <a><span class="glyphicon glyphicon-minus"></span></a> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
</div> 

Et puis mon Javascript

//setup before functions 
var field = document.getElementById("UPC"); 
var typingTimer; //timer identifier 
var doneTypingInterval = 3000; //time in ms, 3 seconds 

//on keyup, start the countdown 
$('#UPC').keyup(function() { 
    typingTimer = setTimeout(doneTyping, doneTypingInterval); 
}); 

//on keydown, clear the countdown 
$('#UPC').keydown(function() { 
    clearTimeout(typingTimer); 
}); 

//user is "finished typing," do something 
if (field.value.length == 0) { 
    //do nothing 
} else { 
    function doneTyping() { 
    var upc = document.getElementById("UPC").value; 
    var table = document.getElementById("ScannedItems"); 
    var row = table.insertRow(-1); 
    var cell1 = row.insertCell(0); 
    var cell2 = row.insertCell(1); 
    var cell3 = row.insertCell(2); 
    var cell4 = row.insertCell(3); 
    var cell5 = row.insertCell(4); 
    var cell6 = row.insertCell(5); 
    cell1.innerHTML = upc; 
    cell2.innerHTML = "Example Description"; 
    cell3.innerHTML = "$3.00"; 
    cell4.innerHTML = "7lbs"; 
    cell5.innerHTML = "$21.00"; 
    cell6.innerHTML = "<a><span class='glyphicon glyphicon-plus' style='padding-right:15px;'></span></a><span>&nbsp;</span><a><span class='glyphicon glyphicon-minus'></span></a>"; 
    upc = ''; 
} 
} 

Answer 1

travail: http://jsfiddle.net/QAbGS/1/

1) Vous devez toujours effacer l'ancienne minuterie avant de le rétablir, juste redéfinissant la variable ne doit pas effacer. L'événement keydown peut ne pas arriver à temps pour l'effacer d'avant, donc l'effacer dans le keyup le résout. 2) Vous étiez en train de faire votre vérification de longueur npc en dehors de la fonction, cela devrait être à l'intérieur de celle-ci!

function doneTyping() { 
    if (field.value.length != 0) { 

3) Vous sauvegardiez la valeur de la zone de texte dans une variable nommée npc. Vous étiez en train de mettre cette variable à vide, pas la zone de texte! Vous devriez faire textbox.value = '' pour réinitialiser ceci.

field.value = '';