JavaScript clearTimeout nicht richtig ausgelöst

Question

Ich habe eine Sendefunktion in einem Textfeld mit JavaScript. Wenn das Skript ausgelöst wird, überprüft es ein Kendo-Gitter für einen bestimmten Artikel und fügt der Menge +1 hinzu und öffnet die entsprechende Zelle im Bearbeitungsmodus. Was ich erreichen möchte ist, dass bei jedem Senden der Timer, der grid.editCell() startet, seinen Timer zurücksetzt.

Derzeit wird das Ereignis ordnungsgemäß ausgelöst. Der Timer wird jedoch nicht zurückgesetzt, obwohl der clearTimeout() funktioniert, wenn ich einfach den Timer starte und ihn danach wieder lösche.

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

Das Problem war, dass var timer = null; außerhalb der einreichen Funktion sein mußten richtig gelöscht und auf Null gesetzt werden, bevor ein neues setTimeout() zu zuweisen.

Answer 2

Sie Delay-Funktion wie diese versuchen kann. Die Verzögerungsfunktion sollte außerhalb jeder Funktion sein.

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

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