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用于其他目的。除了这个其他脚本可能导致命名空间冲突，当然还有一个名为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);

JavaScript，jQuery和'this'：这里发生了什么？

1 个答案: