jquery Отмена отложенного (setTimeout) события, если что-то произошло

Question

На простом английском этот код срабатывает, когда элемент находится над ним. Когда он наведен, я добавляю класс и показываю элемент, затем через 5 секунд я полностью переворачиваю: то есть, я исчезаю с того, что ранее показывал, и удаляю класс, который я ранее добавил.

$("#it").addClass('somestyle').show();
setTimeout(function(){
   $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); });
}, 5000);

• Мой код чист или взломан?
• Как отменить эти отложенные действия (исчезновение и удаление класса), если элемент I снова отображается в течение этих 5 секунд задержки. Если он снова завис, я не хочу, чтобы запланированные отсроченные действия действительно происходили.

Answer 1

Объявить вне функции

    var timer;

, а затем внутри функции:

$("#it").addClass('somestyle').show();
clearTimeout(timer);
timer=setTimeout(function(){
   $("#it").fadeOut("normal", function(){ $(this).removeClass('somestyle'); });
}, 5000);

Сначала с помощью этого кода вы сбрасываете таймаут, а затем устанавливаете его снова, поэтому он снова будет ждать, когда сработает эта функция.

Answer 2

Вы можете установить флаг при наведении курсора, так что при наведении

IsHovering = 1;

после окончания зависания,

IsHovering = 0;

тогда только запустите код в ваше время ожидания

 if(IsHovering==0)

Answer 3

В этой статье описываются многие методы затухания / анимации при наведении:

http://greg -j.com / 2008/07/21 / парения выцветания-переход-с JQuery /

Также посмотрите примеры того, как это выглядит:

http://greg -j.com / статический контент / парение фейдерный-redux.html

Также есть похожий вопрос здесь , с этим решением:

$('.icon').hover(function() {
    clearTimeout($(this).data('timeout'));
    $('li.icon > ul').slideDown('fast');
}, function() {
    var t = setTimeout(function() {
        $('li.icon > ul').slideUp('fast');
    }, 2000);
    $(this).data('timeout', t);
});