鼠標懸停事件中的clearTimeout未從Mouseout事件中清除setTimeout

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()調用就可以使它看起來像所希望的那樣工作。 嘗試這個小提琴上的小懸停游戲。

(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存儲在元素上。