JavaScript clearTimeout ne se déclenche pas correctement

Question

J'ai une fonction de soumission sur une zone de texte avec JavaScript. Lorsque le script se déclenche, il vérifie une grille de Kendo pour un certain article et ajoute +1 à sa quantité, tout en ouvrant la cellule correspondante en mode d'édition. Ce que je veux réaliser, c'est que sur chaque soumettre, la minuterie qui commence grid.editCell() va réinitialiser son minuteur.

Actuellement, l'événement se déclenche correctement. Cependant, la minuterie ne se réinitialise pas, bien que le clearTimeout() fonctionne si je démarre simplement la minuterie puis l'efface juste après.

JavaScript:

$('#txtBarcode').submit(function (e) {   
    var grid = $("#PickListDetailGrid").data("kendoGrid"); 
    var dataSource = $("#PickListDetailGrid").data("kendoGrid").dataSource; 
    var allData = grid.dataSource.data(); 
    var code = this.value; 
    var notification = $("#notification").data("kendoNotification"); 
    var timer = null; 
    clearTimeout(timer); 

    $.each(allData, function (index, item) { 
     if (item.ArticleID == code) { 
      clearTimeout(timer); 
      timer = null; 
      if (item.Quantity > item.PickedQuantity && item.PickedQuantity.toString().length < 4) { 

       var edit = function() { 
        if (item.PickedQuantity != item.Quantity && timer != null) { 
         grid.select("tr:eq(" + (index) + ")"); 
         grid.editCell("tr:eq(" + (index + 1) + ") td:eq(" + (5) + ")"); 
        } else { 
         //do nothing 
        }       
       } 

       item.PickedQuantity++; 
       item.dirty = true; 
       dataSource.sync(); 

       if (item.PickedQuantity != item.Quantity) { 
        console.log("tik tok");       
        if (timer) { 
         clearTimeout(timer); //cancel the previous timer. 
         timer = null; 
        } 
        timer = setTimeout(edit, 3000); 
       } else { 
        clearTimeout(timer); 
        timer = null; 
       } 
       document.getElementById("txtBarcode").value = ""; 

      } else {  
       if (item.PickedQuantity.toString().length > 4) { 

        notification.hide(); 
        notification.show({ 
         message: "Added item" 
        }, "upload-success"); 
       } else { 
        notification.hide(); 
        notification.show({ 
         title: "Quantity Error", 
         message: "You already picked this item to the maximum" 
        }, "error"); 
        document.getElementById("txtBarcode").value = ""; 
        grid.select("tr:eq(" + (index) + ")"); 
        grid.editCell("tr:eq(" + (index + 1) + ") td:eq(" + (5) + ")"); 
        $('.focus :input').focus(); 
       } 
      } 
     } 
    }) 
}) 

Answer 1

Le problème était que var timer = null; devait être en dehors de la fonction soumettre à être correctement effacé et mis à zéro avant d'attribuer un nouveau setTimeout() à lui.

Answer 2

Vous pouvez essayer la fonction de retard comme celui-ci. La fonction de délai devrait être en dehors de chaque fonction.

var delay = (function() { 
    var timer = 0; 
    return function(callback, ms) { 
     clearTimeout(timer); 
     timer = setTimeout(callback, ms); 
    }; 
})(); 

delay(function() { 
    //do something 
}, 3000);