clearTimeout при событии Mouseover не очищает setTimeout из события Mouseout

Question

У меня есть код, который добавляет события наведения мыши и события наведения мыши ко всем тегам «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();
});

Я должен уточнить, что на самом деле должен быть только один активный таймер. Вот почему я хотел, чтобы это было глобальным. Если происходит событие наведения мыши, таймеры не должны оставаться. И если происходит событие отключения мыши, должен быть активен только один таймер - тот, который срабатывает при последнем событии отключения мыши.

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 - глобальный, то он будет перезаписываться на каждой итерации $('a').each().Если вы используете 1.4, вы можете использовать delay метод, скорее всего.или вы можете сохранить timeoutId для элемента с помощью $ (this) .data ('timeoutId', setTimeout (youFunction) `.