js防抖和節流
針對一些會頻繁觸發的事件如scroll、resize,如果正常綁定事件處理函數的話,有可能在很短的時間內多次連續觸發事件,十分影響性能。
因此針對這類事件要進行防抖動或者節流處理
防抖動
它的做法是限制下次函數調用之前必須等待的時間間隔。正確實現 debouncing 的方法是將若幹個函數調用合成 一次,並在給定時間過去之後僅被調用一次。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
// 將會包裝事件的 debounce 函數
function debounce(fn, delay) { // 維護一個 timer
let timer = null ;
return function () {
// 通過 ‘this’ 和 ‘arguments’ 獲取函數的作用域和變量
let context = this ;
let args = arguments;
clearTimeout(timer);
timer = setTimeout( function () {
fn.apply(context, args);
}, delay);
}
} |
1 2 3 4 5 6 7 8 9 |
// 當用戶滾動時被調用的函數
function foo() {
console.log( ‘You are scrolling!‘ );
}
// 在 debounce 中包裝我們的函數,過 2 秒觸發一次
let elem = document.getElementById( ‘container‘ );
elem.addEventListener( ‘scroll‘ , debounce(foo, 2000));
|
-
首先,我們為scroll事件綁定處理函數,這時debounce函數會立即調用,
-
每一次事件被觸發,都會清除當前的 timer 然後重新設置超時調用。
這就會導致每一次高頻事件都會取消前一次的超時調用,導致事件處理程序不能被觸發 - 只有當高頻事件停止,最後一次事件觸發的超時調用才能在delay時間後執行
更進一步,我們不希望非要等到事件停止觸發後才執行,我希望立刻執行函數,然後等到停止觸發 n 秒後,才可以重新觸發執行。
這裏增加一個immediate參數來設置是否要立即執行:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
function debouce(func,delay,immediate){
var timer = null ;
return function (){
var context = this ;
var args = arguments;
if (timer) clearTimeout(time);
if (immediate){
//根據距離上次觸發操作的時間是否到達delay來決定是否要現在執行函數
var doNow = !timer;
//每一次都重新設置timer,就是要保證每一次執行的至少delay秒後才可以執行
timer = setTimeout( function (){
timer = null ;
},delay);
//立即執行
if (doNow){
func.apply(context,args);
}
} else {
timer = setTimeout( function (){
func.apply(context,args);
},delay);
}
}
}
|
節流
節流是另一種處理類似問題的解決方法。
節流函數允許一個函數在規定的時間內只執行一次。
它和防抖動最大的區別就是,節流函數不管事件觸發有多頻繁,都會保證在規定時間內一定會執行一次真正的事件處理函數。
比如在頁面的無限加載場景下,我們需要用戶在滾動頁面時,每隔一段時間發一次 Ajax 請求,而不是在用戶停下滾動頁面操作時才去請求數據。這樣的場景,就適合用節流閥技術來實現。
主要有兩種實現方法:
- 時間戳
- 定時器
時間戳實現:
1 2 3 4 5 6 7 8 9 10 11 12 |
var throttle = function (func,delay){
var prev = Date.now();
return function (){
var context = this ;
var args = arguments;
var now = Date.now();
if (now-prev>=delay){
func.apply(context,args);
prev = Date.now();
}
}
}
|
當高頻事件觸發時,第一次應該會立即執行(給事件綁定函數與真正觸發事件的間隔如果大於delay的話),而後再怎麽頻繁觸發事件,也都是會每delay秒才執行一次。而當最後一次事件觸發完畢後,事件也不會再被執行了。
定時器實現:
當觸發事件的時候,我們設置一個定時器,再觸發事件的時候,如果定時器存在,就不執行;直到delay秒後,定時器執行執行函數,清空定時器,這樣就可以設置下個定時器。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var throttle = fucntion(func,delay){
var timer = null ;
return funtion(){
var context = this ;
var args = arguments;
if (!timer){
timer = setTimeout( function (){
func.apply(context,args);
timer = null ;
},delay);
}
}
}
|
當第一次觸發事件時,肯定不會立即執行函數,而是在delay秒後才執行。
之後連續不斷觸發事件,也會每delay秒執行一次。
當最後一次停止觸發後,由於定時器的delay延遲,可能還會執行一次函數。
可以綜合使用時間戳與定時器,完成一個事件觸發時立即執行,觸發完畢還能執行一次的節流函數:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var throttle = function (func,delay){
var timer = null ;
var startTime = Date.now();
return function (){
var curTime = Date.now();
var remaining = delay-(curTime-startTime);
var context = this ;
var args = arguments;
clearTimeout(timer);
if (remaining<=0){
func.apply(context,args);
startTime = Date.now();
} else {
timer = setTimeout(func,remaining);
}
}
}
|
需要在每個delay時間中一定會執行一次函數,因此在節流函數內部使用開始時間、當前時間與delay來計算remaining,當remaining<=0時表示該執行函數了,如果還沒到時間的話就設定在remaining時間後再觸發。當然在remaining這段時間中如果又一次發生事件,那麽會取消當前的計時器,並重新計算一個remaining來判斷當前狀態。
總結
防止一個事件頻繁觸發回調函數的方式:
-
防抖動:將幾次操作合並為一此操作進行。原理是維護一個計時器,規定在delay時間後觸發函數,但是在delay時間內再次觸發的話,就會取消之前的計時器而重新設置。這樣一來,只有最後一次操作能被觸發。
-
節流:使得一定時間內只觸發一次函數。
它和防抖動最大的區別就是,節流函數不管事件觸發有多頻繁,都會保證在規定時間內一定會執行一次真正的事件處理函數,而防抖動只是在最後一次事件後才觸發一次函數。
原理是通過判斷是否到達一定時間來觸發函數,若沒到規定時間則使用計時器延後,而下一次事件則會重新設定計時器。
js防抖和節流