关于Scroll结束计时器事件的JQuery

时间:2013-06-28 03:06:14

标签: javascript jquery timer scroll

您好我写了一个脚本,在悬停事件的图像上创建一个黑条。当用户开始滚动时,该vlack栏消失。因为没有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));
});

}

1 个答案:

答案 0 :(得分:1)

您应该在开始新超时之前停止旧超时。 调用setTimeout()时会返回timeoutId。保持该id不会影响延迟后是否执行超时。如果需要,它只是为您提供了取消它的方法。

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

if(existingTimeout)
{
    clearTimeout(existingTimeout);
}

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