滚动function多次启动而不是一次

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

Answer 1

滚动事件（以及resize事件）会在用户执行此操作时多次触发。 为了帮助这个，最好的做法就是去抖动 。 但是，我从来没有这样做过。 相反，我使用全局布尔值来检查函数是否已被触发。

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

Answer 2

这对我有用！

 var ScrollDebounce = true; $('.class').on('scroll', function () { if (ScrollDebounce) { ScrollDebounce = false; //do stuff setTimeout(function () { ScrollDebounce = true; }, 500); } })