javascript - Scroll Function Firing Multiple Times Instead of Once -

i trying create website automatically scrolls each section upon single scroll action. means code has check if page scrolled or scrolled down. believe code below solves problem scroll action fired more once while page scrolling. see first alert in if statement reaches 5 instead of desired 1. on matter highly appreciated.

[note] using velocity.js library scroll each section within container.

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; }); 

the scroll event (as resize event) fire multiple times user this. this, best practice debounce. however, i've never gotten work. instead, use global boolean check if function has fired.

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