JavaScript, jQuery i "this": co tu się dzieje?

Question

To jest bardziej pytanie o to, co się dzieje w moim kodzie. To działa, ale potrzebuję trochę oświecenia ...

Używam jQuery do utworzenia detektora zdarzeń na wejściowym elemencie tekstowym. HTML byłoby po prostu w następujący sposób:

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

muszę odbierać zdarzenia, gdy wpisze coś w tej dziedzinie, i aby uniknąć zalane imprez Mam zestaw detektor zdarzeń z zegarem, tak, że moja impreza Kod słuchacz pracuje tylko wtedy, gdy użytkownik nie wpisuj nic dla 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); 
}); 

To działa, ale nie jestem pewien, czy rozumiem, wszystko dzieje się tutaj. Jak widzisz z powyższego fragmentu kodu, muszę śledzić ID timera, który został utworzony na ostatnim wydarzeniu. Robię to, przechowując go w this.timer. Jednak słowo kluczowe this w tym przypadku odnosi się do elementu wejściowego. To co console.log wyjścia:

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

to jest ok, aby zapisać timer ID na elemencie wejściowym? Z tego co wiem, mógłbym robić coś głupiego. Czy to "najlepsza praktyka", czy może to coś zupełnie innego?

Answer 1

Ogólnie wolę nie umieszczać żadnych dalszych wartości bezpośrednio w obiekcie DOM. Gdy dojrzewa DOM, istnieje niewielka szansa, że ​​wybrana przestrzeń nazw może zostać wykorzystana przez DOM do innych celów. Oprócz tego inne skrypty mogą powodować konflikty przestrzeni nazw, na pewno ze zmienną o nazwie timer. Jeśli musisz to zrobić, użyj niewyraźnego obszaru nazw, aby zmniejszyć to ryzyko. Starsze wersje IE mają również dziwne zachowanie, jeśli chodzi o szeregowanie węzła DOM, można uzyskać rzeczywisty atrybut w węźle o nazwie timer z bardzo nieparzystą wartością. Oprócz tego, console.log nie zwraca listy właściwości węzła DOM, co sprawia, że ​​debugowanie jest bardziej złożone niż powinno.

Ogólnie lepiej jest pozostawić DOM taki, jaki jest i odwoływać się do jego właściwości zgodnie z definicją obiektu dokumentu. Moim zdaniem lepiej byłoby umieścić timer w ekwiwalencie publicznej zmiennej statycznej w ramach anonimowej funkcji wraz z obsługą, dzięki czemu unika się problemów z zakresem, w których można przypadkowo nadpisać timer i zachować modularność kodu.

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