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

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的成熟，您选择的名称空间可能会被其他用途使用。除此之外，其他脚本可能会导致名称空间冲突，当然还有一个名为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);