JavaScript超时触发3次而不是一次(clearTimeout不起作用？)

Question

当用户在键入时暂停(而不是在每次按键后)时,我想触发一个ajax动作.所以我做了这样的事情:

当用户在空闲3秒后停止输入时,将执行完成功能...(它是 - 但为什么3次长短语 - 我希望它只运行一次,因为我在每次keydown后清除超时).问题是什么 ？

var timer; 
var interval = 3000; 
$('#inp').keyup(function() {
  timer = setTimeout(done, interval); 
}); 

$('#inp').keydown(function() {
  clearTimeout(timer)  
}); 

function done() {
  console.log('ajax'); 
}

关于jsfiddle的工作示例:http: //jsfiddle.net/vtwVH/

Answer 1

键入时,有时可能会在释放第一个键之前按下另一个键.你可能没有注意到这一点,特别是如果你输入一个长短语.在这种情况下,事件的顺序是不是down up down up,但是down down up up,因此在两个超时将被设置.

在设置之前清除超时(在同一事件处理程序中)更加一致.

Answer 2

问题是你timer在keydown事件中覆盖了变量.

因此,如果您在Timout被清除之前按下另一个键,例如继续按住键

对timeOut的引用将丢失,您无法再次清除它.

要解决此问题,您可以清除并在keyUp事件中设置Timer

var timer; 
var interval = 3000; 


$('#inp').keyup(function(e){ 
    if(timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(done, interval); 

}); 

function done() {
    console.log('ajax'); 
}

这是一个工作小提琴