深入理解JS防抖與節流

摘要： 參考部落格：JS防抖和節流，感謝作者的用心分享 日常開發過程中，滾動事件做複雜計算頻繁呼叫回撥函式很可能會造成頁面的卡頓，這時候我們更希望把多次計算合併成一次，只操作一個精確點，JS把這種方式稱為debounce（防抖）和throttle（節流） 函式防抖 當持續觸發事件時，一...

參考部落格：JS防抖和節流，感謝作者的用心分享

日常開發過程中，滾動事件做複雜計算頻繁呼叫回撥函式很可能會造成頁面的卡頓，這時候我們更希望把多次計算合併成一次，只操作一個精確點，JS把這種方式稱為debounce（防抖）和throttle（節流）

函式防抖

當持續觸發事件時，一定時間段內沒有再觸發事件，事件處理函式才會執行一次，如果設定時間到來之前，又觸發了事件，就重新開始延時。也就是說當一個使用者一直觸發這個函式，且每次觸發函式的間隔小於既定時間，那麼防抖的情況下只會執行一次。

function debounce(fn, wait) {
var timeout = null;//定義一個定時器
return function() {
if(timeout !== null) 
clearTimeout(timeout);//清除這個定時器
timeout = setTimeout(fn, wait);
}
}
// 處理函式
function handle() {
console.log(Math.random()); 
}
// 滾動事件
window.addEventListener('scroll', debounce(handle, 1000));

如上所見，當持續觸發scroll函式，handle函式只會在1秒時間內執行一次，在滾動過程中並沒有持續執行，有效減少了效能的損耗

函式節流

當持續觸發事件時，保證在一定時間內只調用一次事件處理函式，意思就是說，假設一個使用者一直觸發這個函式，且每次觸發小於既定值，函式節流會每隔這個時間呼叫一次

用一句話總結防抖和節流的區別：防抖是將多次執行變為最後一次執行，節流是將多次執行變為每隔一段時間執行

實現函式節流我們主要有兩種方法：時間戳和定時器

例如

var throttle = function(func, delay) {
var prev = Date.now();
return function() {
var context = this;//this指向window
var args = arguments;
var now = Date.now();
if (now - prev >= delay) {
func.apply(context, args);
prev = Date.now();
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

這個節流函式利用時間戳讓第一次滾動事件執行一次回撥函式，此後每隔1000ms執行一次，在小於1000ms這段時間內的滾動是不執行的

再舉一個定時器的例子：

var throttle = function(func, delay) {
var timer = null;
return function() {
var context = this;
var args = arguments;
if (!timer) {
timer = setTimeout(function() {
func.apply(context, args);
timer = null;
}, delay);
}
}
}
function handle() {
console.log(Math.random());
}
window.addEventListener('scroll', throttle(handle, 1000));

當觸發事件的時候，我們設定了一個定時器，在沒到1000ms之前這個定時器為null，而到了規定時間執行這個函式並再次把定時器清除。也就是說當第一次觸發事件，到達規定時間再執行這個函式，執行之後馬上清除定時器，開始新的迴圈，那麼我們看到的效果就是，滾動之後沒有馬上列印，而是等待1000ms列印，有一個延遲的效果，並且這段時間滾動事件不會執行函式。

單用時間戳或者定時器都有缺陷，我們更希望第一次觸發馬上執行函式，最後一次觸發也可以執行一次事件處理函式

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);//取消當前計數器並計算新的remaining
}
}
}
function handle() {
console.log(Math.random());
}
 window.addEventListener('scroll', throttle(handle, 1000));