JavaScript, jQuery und 'das': was ist hier los?

Question

Das ist mehr eine Frage darüber, was in meinem Code vor sich geht. Es funktioniert, aber ich brauche ein wenig Erleuchtung ...

Ich benutze jQuery, um einen Ereignis-Listener auf einem Texteingabeelement zu erstellen. Der HTML-Code wäre einfach wie folgt:

<input type="text" id="autocomplete" size="50" /> 

Ich brauche Ereignisse zu empfangen, wenn jemand Typen etwas in diesem Bereich, und mit Ereignissen überflutet zu vermeiden, dass ich den Ereignis-Listener up mit einem Timer eingestellt haben, so dass mein Fall Zuhörer Code läuft nur, wenn der Benutzer etwas eingeben nicht für 125 ms:

jQuery('#autocomplete').keyup(function(e) { 
    e.preventDefault(); 
    clearTimeout(this.timer); 
    this.timer = setTimeout(function() { 
    jQuery.getJSON([URL goes here], function(data) { 
     // processing of returned data goes here. 
    } 
    }, 125); 

console.log(this); 
}); 

Dies funktioniert, aber ich bin mir nicht ganz sicher, ob ich verstehe hier alles los ist. Wie Sie aus dem obigen Codeabschnitt sehen, muss ich den ID des Timers verfolgen, der am letzten Ereignis erstellt wurde. Ich mache das, indem ich es in this.timer speichern. Das Schlüsselwort this bezieht sich in diesem Fall jedoch auf das Eingabeelement. Dies ist, was console.log Ausgänge:

<input type="text" id="autocomplete" size="50" /> 

Ist es OK, um den Timer ID auf dem Eingangselement zu speichern? Soweit ich weiß, könnte ich etwas Dummes tun. Ist das "Best Practice", oder wäre das etwas ganz anderes?

Answer 1

Im Allgemeinen möchte ich keine weiteren Werte direkt in das DOM-Objekt platzieren. Wenn das DOM reifer wird, besteht eine geringe Chance, dass der von Ihnen gewählte Namespace vom DOM für andere Zwecke verwendet werden kann. Außerdem könnten andere Skripts Namensraumkonflikte verursachen, sicherlich mit einer Variablen namens timer. Wenn Sie dies tun müssen, verwenden Sie einen obskuren Namespace, um dieses Risiko zu mindern. Ältere Versionen von IE haben auch ein merkwürdiges Verhalten, wenn es darum geht, einen DOM-Knoten zu serialisieren, könnten Sie mit einem tatsächlichen Attribut in dem Knoten namens timer mit einem sehr ungeraden Wert enden. Außerdem gibt console.log keine Liste der Eigenschaften des DOM-Knotens zurück, wodurch das Debugging komplexer wird, als es sein sollte.

Im Allgemeinen ist es besser, das DOM so zu lassen, wie es ist, und auf seine Eigenschaften zu verweisen, wie sie vom Dokumentobjekt definiert sind. Meiner Meinung nach ist es besser, den Zeitgeber in eine anonyme Funktion zusammen mit Ihrem Handler in das Äquivalent einer öffentlichen statischen Variablen zu setzen, um Probleme mit dem Bereich zu vermeiden, in denen Sie versehentlich den Zeitgeber überschreiben und Ihren Code modular halten.

(function($) { 

    // Static variable for this function 
    var keyupTimer; 

    // Event handler for keyup 
    $('#autocomplete').keyup(function(event) 
    { 
     event.preventDefault(); 

     clearTimeout(keyupTimer); 

     keyupTimer = setTimeout(function() 
     { 
      $.getJSON([URL goes here], function(data) 
      { 
       // processing of returned data goes here. 
      } 
     }, 125); 
    }); 
})(jQuery);