JQuery on Scroll end 타이머 이벤트

Question

안녕하세요. hover 이벤트의 이미지 위에 검정색 막대를 만드는 스크립트를 작성했습니다. 그 vlack bar는 사용자가 스크롤을 시작할 때 사라집니다. ScrollEnd 이벤트가 없기 때문에 여기에 제안 된 타이머를 만들었습니다. Event when user stops scrolling

잘 작동하지만 앞뒤로 심하게 스크롤하면 검은 색 막대가 다시 나타나기 시작합니다. 왜 이런 일이 일어나는 지 잘 모르겠지만 타이머가 매번 다른 스크롤 이벤트에 할당된다고 가정합니다.

이 문제를 해결하는 방법에 대한 아이디어가 있습니까?

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

스크롤 이벤트 코드 :

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

당신은 새로운 일을 시작하기 전에 기존의 타임 아웃을 중지해야합니다. setTimeout()을 호출하면 다시 timeoutId가 반환됩니다. 이 ID를 유지해도 지연 후 시간 초과가 실행되는지 여부에는 영향을주지 않습니다. 필요한 경우 취소 할 수있는 방법을 제공합니다.

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

if(existingTimeout) 
{ 
    clearTimeout(existingTimeout); 
} 

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

의