clearTimeout鼠标悬停事件不清除setoutout鼠标事件

Question

我有一些代码，将页面上的所有'a'标签添加鼠标事件和鼠标事件。我喜欢它，以便鼠标输出启动5秒计时器，然后调用一个函数。但是，如果新的mouseover事件触发，它应该取消任何现有的定时器。我使用的代码如下。 setTimeout（）工作正常，但它似乎像clearTimeout（）没有引用正确的timeoutID，即使我全局声明它。有什么建议么？

var timeoutID; 

function addMouseoverEvent() { 
    $('a').each(function(index) { 
     $(this).mouseover(function() { 
      clearTimeout(timeoutID); 
      // do stuff 
     }) 
    }); 
} 

function addMouseoutEvent() { 
    $('a').each(function(index) { 
     $(this).mouseout(function() { 
      timeoutID = setTimeout(function() { 
       // do stuff 
      }, 5000); 
     }) 
    }); 
} 

$(window).load(function() { 
    addMouseoverEvent(); 
    addMouseoutEvent(); 
}); 

我应该澄清，应该只有一个活动计时器。这就是为什么我希望它是全球性的。如果发生鼠标悬停事件，则不应保留定时器。如果发生鼠标事件，则只有一个计时器应该处于活动状态 - 由最后一次鼠标事件触发的计时器。

Answer 1

如果您的timeoutId是globall，那么它将在$('a').each()的每次迭代中被覆盖。如果你使用1.4，你可以使用最可能的delay方法。或者你可以使用$（this）.data（'timeoutId'，setTimeout（youFunction）'）在元素上存储timeoutId。

Answer 2

我知道它已经被回答了，但我发现只需要移除.each()调用就会出现。根据需要努力尝试在this Fiddle小悬停游戏

(function game() { 
    var timeoutID; 
    $('a').mouseover(function() { 
     $('#box').html('All is well.').removeClass('bang'); 
     clearTimeout(timeoutID); 
     // do stuff 
    }); 
    $('a').mouseout(function() { 
     $('#box').html('You have 2 seconds to return!'); 
     timeoutID = setTimeout(function() { 
      $('#box').addClass('bang').html('Too Late!'); 
      // do stuff 
     }, 2000); 
    }); 
}()); 

这是非常有可能的，我失去了一些东西 - 但悬停游戏似乎做工精细