滚动功能触发多次而非一次。

Question

我正在尝试创建一个网站，可以在单次滚动操作中自动滚动到每个部分。这意味着代码必须检查页面是向上滚动还是向下滚动。我相信以下代码可以解决我的问题，但是当页面滚动时，滚动动作会被触发多次。你会看到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;
});

- Andrew Denaro

Answer 1

随着用户的操作，滚动事件（以及调整大小事件）会多次触发。为了解决这个问题，最佳实践是使用防抖函数。但是，我从来没有让它起作用过。相反，我使用全局布尔变量来检查函数是否已经执行。

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

- Donnie D'Amato

---

完美地运作。只需添加一个setTimeout，在滚动500毫秒后运行，以使scrolled=false。 - Deepak Pathak

还必须添加一个setTimeout，因为滚动事件会排队请求，所以如果没有setTimeout，滚动事件仍然会以同步方式多次触发。 - deanwilliammills

我也使用了超时功能，非常简单干净。 - Dory Daniel

Answer 2

这对我有效!

var ScrollDebounce = true;

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

        //do stuff    

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

- JaredCS

---

这真的起作用了！谢谢。顺便说一下，你的名字似乎很熟悉。看起来你来自菲律宾usj-r。 - enrique