JavaScript，jQuery和'this'：這里發生了什么？

Question

這是一個關於我的代碼中發生了什么的問題。 它有效，但我需要一點啟示......

我正在使用jQuery在文本輸入元素上創建一個事件監聽器。 HTML將簡單如下：

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

每當有人在該字段中鍵入內容時，我都需要接收事件，並且為了避免被事件淹沒，我已經使用計時器設置了事件監聽器，這樣我的事件監聽器代碼只有在用戶沒有輸入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);
});

這有效，但我不太確定我是否理解這里發生的一切。 從上面的代碼中可以看出，我需要跟蹤在上一個事件中創建的計時器的ID 。 我把它存儲在this.timer 。 但是，在這種情況下， this關鍵字指的是input元素。 這是console.log輸出的內容：

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

可以在輸入元素上存儲定時器ID嗎？ 據我所知，我可能會做一些愚蠢的事情。 這是“最佳實踐”，還是會有不同之處？

Answer 1

通常，我不希望將任何其他值直接放入DOM對象中。 隨着DOM的成熟，您選擇的命名空間很可能被DOM用於其他目的。 除了這個其他腳本可能導致命名空間沖突，當然還有一個名為timer的變量。 如果必須這樣做，那么使用一個模糊的命名空間來降低這種風險。 較舊版本的IE在序列化DOM節點時也有奇怪的行為，您最終可能會在名為timer的節點中找到一個具有非常奇怪值的實際屬性。 console.log ， 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);