JQuery on Scroll end timer event

Question

Привет, Я написал сценарий, который создает черную полосу над изображением на событии зависания. Эта панель vlack исчезает, когда пользователь начинает прокрутку. Поскольку нет события ScrollEnd, я создал такой таймер, как предлагается здесь Event when user stops scrolling

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

Любая идея о том, как исправить это?

JsFiddle: http://jsfiddle.net/7kw8z/29/

Scroll Код события:

function scroll(imageContainer, menu){ 
imageContainer.mousewheel(function(event, delta, deltaX, deltaY) { 
    event.preventDefault(); 
    $("p").text(delta); 
    menu.css("visibility", "hidden"); 

    $.data(this, 'timer', setTimeout(function() { 
    menu.css("visibility", "visible"); 
     }, 1000)); 
}); 

}

Answer 1

Вы должны остановить старый тайм-аут перед началом нового. Вы получаете timeoutId назад, когда вы вызываете setTimeout(). Сохранение этого идентификатора не влияет на то, будет ли тайм-аут выполняться после задержки. Это просто дает вам способ отменить его, если вам нужно.

var existingTimeout = $(this).data("timer"); 

if(existingTimeout) 
{ 
    clearTimeout(existingTimeout); 
} 

$(this).data("timer", setTimeout(function() { 
    menu.css("visibility", "visible"); 
}, 1000));