Javascript - JQuery on() clearTimeout Bereich Problem

Question

Ich habe gesucht und gesucht und ich komme leer auf diesem einen Jungs. Hilfe! Ich beobachte ein Eingabefeld (#filter_query) für Schlüsselereignisse mit JQuery on(). Wenn der Benutzer etwas Text in dieses Eingabefeld steckt, löst on() ein setTimeout() aus, das wiederum eine Suchfunktion für die Site auslöst. Ich versuche zu vermeiden, dass die Suche ausgelöst wird, wenn der Benutzer weiterhin in das Eingabefeld tippt, also das clearTimeout(). Aus irgendeinem Grund wird die Timeout-ID nicht für clearTimeout beibehalten und jedes Mal wird eine neue ID generiert.

Hier ist mein Code:

$(document).on('keyup', '#filter_query', function (event) { 
    var iTimeoutID, 
     iTypingDelay = 800, 
     sFilterVal = $.trim($('#filter_query').val()), 
     sFilterCat = $('#filter_catagory').val(), 
     sFilterCol = $('#filter_col').val(); 

    clearTimeout(iTimeoutID); 

    if (sFilterVal !== "") { 
     iTimeoutID = setTimeout(
        function() { 
         searchFunction(); 
        }, 
        iTypingDelay 
        ); 
    } 
}); 

Mit dem obigen Code meiner Suchfunktion mehrmals unabhängig von der clear abgefeuert wird(). Vielen Dank!

Answer 1

Ihre iTimeoutID ist eine lokale Variable für die .on() Event-Handler-Funktion und somit ist es jedes Mal zerstört, wenn diese Funktion das nächste Mal abgeschlossen und neu erstellt. Verschiebe es aus diesem Bereich auf eine höhere Ebene oder auf die globale Ebene, damit es von einem Ereignis zum nächsten überleben kann.

Sie können es so machen;

var iTimeoutID = null; 
$(document).on('keyup', '#filter_query', function (event) { 
    var iTypingDelay = 800, 
     sFilterVal = $.trim($('#filter_query').val()), 
     sFilterCat = $('#filter_catagory').val(), 
     sFilterCol = $('#filter_col').val(); 

    if (iTimeoutID) { 
     clearTimeout(iTimeoutID); 
     iTimeoutID = null; 
    } 

    if (sFilterVal !== "") { 
     iTimeoutID = setTimeout(function() { 
      iTimeoutID = null; 
      searchFunction(); 
     }, iTypingDelay); 
    } 
}); 

Wenn Sie globale Variablen zu vermeiden, oder Sie haben mehr als eine von ihnen, Sie jQuery verwenden können .data() wie dies die Timer-ID auf dem Objekt zu speichern:

$(document).on('keyup', '#filter_query', function (event) { 
    var self = $(this); 
    var iTimeoutID = self.data("timerID") || null; 
    var iTypingDelay = 800, 
     sFilterVal = $.trim($('#filter_query').val()), 
     sFilterCat = $('#filter_catagory').val(), 
     sFilterCol = $('#filter_col').val(); 

    if (iTimeoutID) { 
     clearTimeout(iTimeoutID); 
     iTimeoutID = null; 
    } 

    if (sFilterVal !== "") { 
     iTimeoutID = setTimeout(function() { 
      self.data("timerID", null); 
      searchFunction(); 
     }, iTypingDelay); 
    } 
    self.data("timerID", iTimeoutID); 
}); 

Hier ist eine andere Version dass verwendet eine selbstausführende Funktion für einige Variablen als Shell zu handeln, die über die Event-Handler ohne global sein dauern kann:

(function()() { 
    var iTimeoutID = null; 
    $(document).on('keyup', '#filter_query', function (event) { 
     var iTypingDelay = 800, 
      sFilterVal = $.trim($('#filter_query').val()), 
      sFilterCat = $('#filter_catagory').val(), 
      sFilterCol = $('#filter_col').val(); 

     if (iTimeoutID) { 
      clearTimeout(iTimeoutID); 
      iTimeoutID = null; 
     } 

     if (sFilterVal !== "") { 
      iTimeoutID = setTimeout(function() { 
       iTimeoutID = null; 
       searchFunction(); 
      }, iTypingDelay); 
     } 
    }); 
})(); 

ist dies etwas war quic k und es gab wenig Chance auf einen Konflikt mit anderem Code und es gibt nur ein Objekt, das vom Event-Handler bedient wird, die erste Option ist völlig in Ordnung.

Wenn der Ereignishandler .on() mehrere Objekte bedient und jeder seinen eigenen Status verfolgen muss, ist die zweite Option dafür perfekt geeignet.

Wenn Sie nicht mehrere Objekte in demselben Ereignishandler haben, ist die dritte Option die einfachste Möglichkeit, keine neuen globalen Variablen hinzuzufügen.

Answer 2

Da Sie die Variable var iTimeoutID definieren, bedeutet dies, dass es keine globale Variable ist und nur innerhalb dieser Funktion zugänglich ist. Wenn die Funktion erneut aufgerufen wird, erstellt sie eine neue Variable.

Ich glaube, Sie sollten es beheben können, indem Sie die Variable var iTimeoutID nicht deklarieren.

Ich könnte falsch liegen, wenn ja, bitte korrigieren Sie mich.