※ 本文為轉錄連結，轉錄者為 mesak
看板 Knuckles_note
作者 標題 [JS] 避免直接在scroll上綁定function
時間 2012年11月25日 Sun. AM 05:41:09
參考 avoid attaching handlers to the window scroll event
如果想在捲動捲軸時執行一個自定的function時
可以這樣用：
$(window).scroll(function(){
});
myFunction(); //自訂的function
});
不過這樣會造成捲動一次畫面時就執行了好幾次的 myFunction();
如果 myFunction(); 要做的事情有點多的話
捲動時就會變的卡卡的
所以應該要避免捲動時執行多次的 myFunction()
可以這樣：
var scrollTimeout = null;
$(window).scroll(function(){
});
$(window).scroll(function(){
if(scrollTimeout){
clearTimeout(scrollTimeout);
scrollTimeout = null;
}
scrollTimeout = setTimeout(function(){
myFunction(); //自訂的function
}, 250);
});
每次捲動事件發生時就 setTimeout 延遲個 250ms 再執行
並把這個 setTimeout 存在 scrollTimeout
若在這 250ms 中又發生了捲動事件，就利用 scrollTimeout 將上個 setTimeout 取消
並重新再設一次 setTimeout，重新延遲個 250ms 再執行
直到捲動事件停止了 250ms 以上才會執行 myFunction()
--
※ 作者: Knuckles 時間: 2012-11-25 05:41:09
※ 編輯: Knuckles 時間: 2015-10-19 07:08:18
回列表(←)
分享