js前端效能優化之函式節流和函式防抖
前言:針對一些會頻繁觸發的事件如scroll、resize,如果正常繫結事件處理函式的話,有可能在很短的時間內多次連續觸發事件,十分影響效能
節流:
節流:使得一定時間內只觸發一次函式。
它和防抖動最大的區別就是,節流函式不管事件觸發有多頻繁,都會保證在規定時間內一定會執行一次真正的事件處理函式,而防抖動只是在最後一次事件後才觸發一次函式。
原理是通過判斷是否到達一定時間來觸發函式,若沒到規定時間則使用計時器延後,而下一次事件則會重新設定計時器
主要有兩種實現方法:
- 時間戳
- 定時器
時間戳實現:當高頻事件觸發時,第一次應該會立即執行(給事件繫結函式與真正觸發事件的間隔如果大於delay的話),而後再怎麼頻繁觸發事件,也都是會每delay秒才執行一次。而當最後一次事件觸發完畢後,事件也不會再被執行了。
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秒後,定時器執行執行函式,清空定時器,這樣就可以設定下個定時器。
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延遲,可能還會執行一次函式。
綜合使用時間戳與定時器,完成一個事件觸發時立即執行,觸發完畢還能執行一次的節流函式:
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時間內再次觸發的話,就會取消之前的計時器而重新設定。這樣一來,只有最後一次操作能被觸發
// 將會包裝事件的 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. 首先,我們為scroll事件繫結處理函式,這時debounce函式會立即呼叫,
因此給scroll事件繫結的函式實際上是debounce內部返回的函式
2. 每一次事件被觸發,都會清除當前的 timer 然後重新設定超時呼叫。
這就會導致每一次高頻事件都會取消前一次的超時呼叫,導致事件處理程式不能被觸發
3. 只有當高頻事件停止,最後一次事件觸發的超時呼叫才能在delay時間後執行
寫在最後: 節流和防抖運用場景還是蠻多的,也是最為效能優化的一大利器;歡迎指正不足之處