分享一個jquery->scroll防止重複觸發防抖function-教學撰寫:徐嘉裕Neil hsu

使用jquery->scroll進行判斷取值時遇到頭痛的問題就是會重複觸發兩次，這樣會導致觸發後執行的function也跑兩次，輕者消耗CPU效能，嚴重的像是瀑布流相同內容輸出兩次，所以必須要有scroll的防抖機制才行(只取一次觸發值)。

這是原生的scroll code ，大家可以執行看看

$(window).scroll(function() {

    alert($(window).scrollTop());

});

只要滑鼠滾輪向下停住時就會發生兩次觸發，為了解決這問題透過G大神找到這個好用的scroll 防抖程式

//scroll防抖程式

var timeout = null;

window.addEventListener('scroll', function() {

    if(timeout !== null) clearTimeout(timeout);

    timeout = setTimeout(function() {

    var scrollTop =$(window).scrollTop();

         //程式執行區

           alert(scrollTop);

    }.bind(this), 1000);

});

只需要吧工作function放在紅字的程式執行區即可，防抖程式會以setTimeout延遲1000毫秒為誤差範圍取最後一個觸發值，用這支程式來跑AJAX瀑布流資料也不會亂噴了，CPU消耗也減低很多，有需要的朋友可以參考看看。

工作心得撰寫：徐嘉裕 Neil hsu