我有一些代码可以将 mouseover 事件和 mouseout 事件添加到页面上的所有“a”标记。我希望 mouseout 启动一个 5 秒计时器,之后它调用一个函数。但是,如果触发新的鼠标悬停事件,它应该取消任何现有的计时器。我正在使用的代码如下。 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();
});
我应该澄清一下,实际上应该只有一个事件计时器。这就是为什么我希望它是全局性的。如果发生鼠标悬停事件,则不应保留任何计时器。如果发生 mouseout 事件,则只有一个计时器应该处于事件状态 - 由最后一个 mouseout 事件触发的计时器。
最佳答案
我知道它已经得到解答,但我发现只需删除 .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);
});
}());
很有可能我遗漏了什么——但悬停游戏似乎运行良好。
关于javascript - 鼠标悬停事件上的 clearTimeout 未从 Mouseout 事件中清除 setTimeout,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3445331/