JavaScript, jQuery e "questo": cosa sta succedendo qui?

Question

Questa è più una domanda su cosa sta succedendo nel mio codice. Funziona, ma ho bisogno di un po 'di illuminazione ...

Sto usando jQuery per creare un listener di eventi su un elemento di input del testo. Il codice HTML sarebbe semplicemente come segue:

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

Ho bisogno di ricevere eventi ogni volta che qualcuno digita qualcosa in quel campo, e per evitare di essere inondati di eventi ho impostato il listener di eventi con un timer in modo che il mio evento codice ascoltatore viene eseguito solo se l'utente non ha digitare nulla per 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); 
}); 

Questo funziona, ma non sono del tutto sicuro se ho capito tutto quello che succede qui. Come si vede dal codice di cui sopra, ho bisogno di tenere traccia dello ID del timer che è stato creato sull'ultimo evento. Lo faccio memorizzandolo in this.timer. Tuttavia, la parola chiave this in questo caso si riferisce all'elemento di input. Questo è ciò che console.log uscite:

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

E 'ok per memorizzare il timer ID sull'elemento di ingresso? Per quel che ne so, potrei fare qualcosa di stupido. Questa è la "migliore pratica" o sarebbe qualcosa di molto diverso?

Answer 1

In generale, preferisco non inserire ulteriori valori direttamente nell'oggetto DOM. Man mano che il DOM matura, c'è una sottile possibilità che lo spazio dei nomi che scegli possa essere usato dal DOM per altri scopi. Così come altri script potrebbero causare conflitti nello spazio dei nomi, certamente con una variabile chiamata timer. Se è necessario eseguire questa operazione, utilizzare uno spazio dei nomi oscuro per mitigare questo rischio. Le versioni precedenti di IE hanno anche un comportamento strano quando si tratta di serializzare un nodo DOM, si potrebbe finire con un attributo reale nel nodo chiamato timer con un valore molto dispari. Inoltre, console.log non restituisce un elenco delle proprietà del nodo DOM rendendo il debug più complesso di quanto dovrebbe essere.

In generale è preferibile lasciare il DOM così com'è e fare riferimento alle sue proprietà come definito dall'oggetto del documento. Secondo me sarebbe una buona pratica mettere il timer nell'equivalente di una variabile statica pubblica all'interno di una funzione anonima insieme al gestore, evitando così problemi di ambito in cui potresti sovrascrivere accidentalmente il tuo timer e mantenere il tuo codice modulare.

(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);