滚动功能触发多次而不是一次答案

【问题标题】：Scroll Function Firing Multiple Times Instead of Once滚动功能触发多次而不是一次
【发布时间】：2016-04-21 16:43:21
【问题描述】：

我正在尝试创建一个网站，该网站会在单个滚动操作时自动滚动到每个部分。这意味着代码必须检查页面是向上滚动还是向下滚动。我相信下面的代码可以解决我的问题，但是在页面滚动时会多次触发滚动操作。您将看到 if 语句中的第一个警报达到 5 而不是所需的 1。非常感谢您对此事的任何帮助。

[注意] 我正在使用velocity.js 库滚动到容器中的每个部分。

var page = $("#content-container");
var home = $("#home-layer-bottom");
var musicians = $("#musicians");
var athletes = $("#athletes");
var politics = $("#politics");
var bio = $("#politics");
var pages = [ home,musicians,athletes,politics,bio ];

var pageCur = 0;


var lastScrollTop = 0;
page.scroll(function(){

var st = $(this).scrollTop();
var pageNex = pageCur + 1;

if (st > lastScrollTop){
    alert(pageNex);
pages[pageNex].velocity("scroll", { container: $("#content-container") });
} else {
   alert(pageCur-1);
pages[pageCur-1].velocity("scroll", { container: $("#content-container") });
}
lastScrollTop = st;
pageCur = pageNex;
});

【问题讨论】：

标签： javascript jquery arrays scroll infinite-scroll

【解决方案1】：

当用户执行此操作时，滚动事件（以及调整大小事件）会触发多次。为了解决这个问题，最好的做法是debounce。但是，我从来没有让它发挥作用。相反，我使用全局布尔值来检查函数是否已触发。

var scrolled = false;
page.on('scroll', function(){
    if(!scrolled){
        scrolled = true;
        //do stuff that should take a while...
        scrolled = false;
    };
});

【讨论】：

完美运行。刚刚添加了一个在滚动 500 毫秒后运行的 setTimeout，以使 scrolled = false。
还必须添加一个setTimeout，因为滚动事件将请求排队，所以没有setTimeout，滚动事件仍然会触发多次，只是以同步方式
我做了同样的超时，非常简单干净

【解决方案2】：

这对我有用！

var ScrollDebounce = true;
$('.class').on('scroll',
function () {
if (ScrollDebounce) {
ScrollDebounce = false;

//do stuff    

setTimeout(function () { ScrollDebounce = true; }, 500);
}
})

【讨论】：

这确实有效！谢谢。顺便说一句，你的名字似乎很熟悉。看起来像来自 usj-r 菲律宾