Question

我有一些代码可以将鼠标悬停事件和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);
    });
}());

我很可能错过了一些东西 - 但悬停游戏似乎工作正常。

Answer 2

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

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

2 个答案: