Javascript 鼠标悬停事件上的clearTimeout未从鼠标悬停事件中清除setTimeout

我有一些代码将mouseover事件和mouseout事件添加到页面上的所有“a”标记中。我希望鼠标能够启动一个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();
});

---

我应该澄清，实际上应该只有一个活动计时器。这就是为什么我希望它是全球性的。如果发生鼠标悬停事件，则不应保留任何计时器。如果发生鼠标移出事件，则只有一个计时器处于活动状态，即上次鼠标移出事件触发的计时器。

如果您的timeoutId为globall，则它将在

$（'a'）的每次迭代中被覆盖。each（）

。如果您使用的是1.4，则最有可能使用

delay

方法。或者，您可以使用$（this.data（'timeoutId'，setTimeout（youFunction）`）将timeoutId存储在元素上。

我知道它已经得到了回答，但我发现只要删除

。each（）

调用就可以让它看起来像所需的那样工作。在上尝试小悬停游戏

---

很有可能我遗漏了什么——但悬停游戏似乎运行得很好。

你的锚中有图像吗？或者其他元素吗？是的，可能有图像。元素是什么还不知道（这实际上是一个Chrome插件，它将在访问的每个页面上运行，因此页面的内容可以是任何内容）。他没有在

中分配它。虽然，它发生在处理程序中…实际上
。each（）
是无关的，他可以完全删除该闭包。但是它仍然在迭代。在重新运行的集合中有多个
元素…使用
尽管每个
都是多余的。我已经删除了.each（）根据您的建议。代码更好，但clearTimeout（）仍然不起作用。如果我在每个元素上存储timeoutID，调用clearTimeout（）时是否需要迭代每个元素的timeoutID以确保我都得到了它们？尽管我将其绑定到了
.data（）
方法，但还是成功了
使其具有全局作用域。在调用
setTimeout（）之前，还必须调用
clearTimeout（$（document.data（'timeoutID'））
在
mouseover
事件中。谢谢！@dosboy-问题是锚内的元素，因为
mouseout
在离开孩子时也会触发，你可能可以使用你的原始版本，只需使用
mouseenter
和
mouseleave
而不是
mouseover
和
mouseout
：）在jsFiddle上测试了它，您是对的，它确实在那里工作。我有90%的积极性，虽然昨晚我的执行工作没有起作用，但现在已经很晚了，我很累+我只是想花点时间来测试一下，因为它看起来确实有效（至少在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);
    });
}());