javascript - 鼠标悬停事件上的 clearTimeout 未从 Mouseout 事件中清除 setTimeout

Question

我有一些代码可以将 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 事件触发的计时器。

Answer 1

我知道它已经得到解答，但我发现只需删除 .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);
    });
}());

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