5

这更多是关于我的代码中发生了什么的问题。它有效，但我需要一点启发......

我正在使用 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在输入元素上吗？据我所知，我可能会做一些愚蠢的事情。这是“最佳实践”，还是会有很大不同？

4

1 回答 1

2

一般来说，我不希望将任何进一步的值直接放入 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);
于 2013-04-24T06:40:09.390 回答