JavaScript，jQuery和'this'：這裏發生了什麼？

Question

這更多的是關於我的代碼中發生了什麼的問題。它的工作原理，但我需要一點點啓發...

我正在使用jQuery創建文本輸入元素的事件偵聽器。該HTML只會如下：

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

我需要接受每當有人類型的東西到該領域，並避免與我設置的事件監聽了一個計時器事件淹沒事件，這樣我的事件監聽器的代碼只有在用戶沒有爲125毫秒鍵入任何運行：

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

這工作，但我不能肯定，如果我明白了一切會在這裏。正如你從上面的代碼中看到的那樣，我需要跟蹤在最後一個事件中創建的定時器的ID。我通過將它存儲在this.timer中來做到這一點。但是，這種情況下的this關鍵字指的是輸入元素。這是console.log輸出：

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

是否確定存儲輸入元件上的計時器ID？據我所知，我可能會做一些愚蠢的事情。這是「最佳做法」，還是會有很大不同？

Answer 1

一般情況下，我不希望將任何其他值直接放入DOM對象。隨着DOM的成熟，您選擇的名稱空間可能會被其他用途使用。除此之外，其他腳本可能會導致名稱空間衝突，當然還有一個名爲timer的變量。如果你必須這樣做，那麼使用一個不起眼的命名空間來減輕這種風險。舊版本的IE在序列化DOM節點時也有奇怪的行爲，最終可能會在名爲timer的節點中產生一個具有非常奇怪值的實際屬性。除此之外，console.log不會返回一個DOM節點屬性列表，使調試比應該更復雜。

通常情況下，最好將DOM保持原樣並引用由文檔對象定義的屬性。在我看來，最好的做法是將計時器與您的處理程序一起放入匿名函數中的公共靜態變量的等價物中，這樣可以避免任何範圍問題，您可能會意外地覆蓋計時器並使代碼保持模塊化。

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