JavaScript、jQuery和'；这'；：什么'；这是怎么回事？

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

我使用jQuery在文本输入元素上创建事件侦听器。HTML将简单地如下所示：

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

这是可行的，但我不太确定我是否理解这里发生的一切。从上面的代码中可以看出，我需要跟踪上次事件中创建的计时器的

ID

。我通过将其存储在

this.timer

中来实现这一点。但是，在本例中，

this

关键字指的是输入元素。这是console.log的输出：

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

---

是否可以将计时器

ID

存储在输入元素上？据我所知，我可能在做一些愚蠢的事情。这是“最佳实践”，还是会有很大的不同？

一般来说，我不希望将任何进一步的值直接放入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);

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