JavaScript、jQuery 和 'this' : what's going on here?

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 的成熟，您选择的命名空间可能会被 DOM 用于其他目的的可能性很小。除了这个，其他脚本也可能导致 namespace 冲突，当然还有一个名为 timer 的变量。如果你必须这样做，那么使用一个模糊的命名空间来降低这种风险。旧版本的 IE 在序列化 DOM 节点时也有奇怪的行为，您最终可能会在节点中得到一个名为 timer 的实际属性，其值非常奇怪。除此之外，console.log 不返回 DOM 节点属性列表，这使得调试比应有的复杂。

通常，更好的做法是让 DOM 保持原样，并按照文档对象的定义引用其属性。在我看来，更好的做法是将计时器与您的处理程序一起放入匿名函数中的公共(public)静态变量的等价物中，这避免了您可能不小心覆盖计时器并保持代码模块化的任何范围问题。

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