如何防止scroll()触发多次事件

Question

我正在使用jquery.visible.js来检测一个DIV是否在视图中（它启动了一个插件上的动画，具有类似于圆形动画效果）。但是每次我使用滚轮时它都会不断触发，无限地增加自身，我无法通过off()或unbind()停止它。谢谢！

 // Check vertical for circliful using jquery.visible.js
$(window).scroll(function(){
    if ($("#moreSection").visible(true)){


        // trigger circliful
        $('#myStat-1').circliful() // this wont stop firing

}
});

- user3358014

---

两个答案都有一些错误的信息，滚动不是在像素上触发，而是在显示帧速率上触发。http://codepen.io/anon/pen/xbNOdG?editors=001 - Shikkediel

谢谢Shikkedial，知道这个非常有趣。 - user3358014

Answer 1

如#Shikkediel指出，scroll()在帧速率变化时触发。因此每次滚动都可能会触发数百次。

你可以这样做：

$(window).scroll(function(){
    if ($("#moreSection").visible(true)){
        doActionAndStopScript();
    }
});

function doActionAndStopScript(){
    $('#myStat-1').circliful() // now it will fire once
    $(window).unbind('scroll');
}

你只能在$(window)之外调用unbind()

- Aryeh Armon

---

嗨，Aryeh，是的，我需要它在滚动到视图中时仅触发一次，然后如果可能销毁事件侦听器 - 我正在使用jquery.visible.js来测试视口。 - user3358014

何时滚动到视图中？页面的某个特定部分？ - Aryeh Armon

之前我使用了另一个滚动检测插件，但它并没有起到应有的作用，反而导致了这样的错误：$('div').unbind('inview'); - user3358014

这是没有jquery.visible.js的网站链接：http://www.joewebsitedesigner.co.uk/test/ （其中包含蓝色圆形动画的div）。 - user3358014

我编辑了我的帖子。如果有效，请告诉我。如果有帮助，请不要忘记点赞 :) - Aryeh Armon

Answer 2

< p > < code >scroll事件会在每滚动一个像素时触发一次。为了解决这种行为，您可以使用一个定时器，在x毫秒后仅执行您的逻辑停止滚动。试试这个：

var timer;
$(window).scroll(function() {
    clearTimeout(timer);
    timer = setTimeout(function() {
        if ($("#moreSection").visible(true)){
            $('#myStat-1').circliful();
        }
    }, 250);
});

通常等待250毫秒就足够触发你的代码了。你可以根据需要调整这个值。

- Rory McCrossan

---

嗨，Rory，感谢你的帮助，但它仍然无法停止，我将在几秒钟内上传网站。 - user3358014

太棒了，我使用这种方法在100毫秒延迟上，滚动事件仍然只触发一次。 - fabio.sang