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

Question

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

javascript jquery events timeout

4

ggutenberg 10 Авг 2010 в 05:10

Answer 1

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

2

prodigitalson 10 Авг 2010 в 01:20

Answer 2

Я знаю, что на него уже ответили, но я обнаружил, что простое удаление вызова .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);
    });
}());

Очень возможно, что я чего-то упускаю, но игра наведения вроде работает нормально.

4

Ken Redler 14 Окт 2011 в 01:12

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

2 ответа

Похожие вопросы

Новые вопросы

javascript