滚动结束计时器事件的JQuery答案

【问题标题】：JQuery on Scroll end timer event滚动结束计时器事件的JQuery
【发布时间】：2013-06-28 03:06:13
【问题描述】：

您好，我编写了一个脚本，可以在悬停事件的图像上创建一个黑条。当用户开始滚动时，那个 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));
});

}

【问题讨论】：

jQuery: Event, when User stops scrolling的可能重复

标签： javascript jquery timer scroll

【解决方案1】：

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

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

if(existingTimeout)
{
    clearTimeout(existingTimeout);
}

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

【讨论】：