JavaScript函數防抖和函數節流

什麼是函數防抖和函數節流

函數防抖和函數節流是一種處理高頻率觸發事件時，優化js代碼，降低回調函數的執行頻率，提高前端性能的手段。

函數防抖（debounce）

函數防抖指的是當一個事件被觸發n秒後再執行回調函數，若該事件在n秒内再次被觸發，則重新計時。

場景：在搜尋框内輸入關鍵字，當停止完成一段時間之後才會自動加載搜尋結果。

debounce函數代碼實作

function debounce(callback, delay = 2000) {
	//	若timer已存在則取消定時器
	timer && clearTimeout(timer);
	let timer.value = setTimeout(callback, delay);
}
           

函數節流（throttle）

函數節流指的是當一個事件在n秒内被多次觸發時，隻執行一次。

常見應用場景：滾動條移動至接近底部時讓頁面加載更多資源。由于滾動一次頁面可能會觸發幾十次scroll事件，性能損耗嚴重，是以每隔一段時間計算一次滾動位置更加合适。

throttle函數代碼實作

function throttle(callback, delay = 250) {
	let timer;
    return function() {
    	//	如果該事件在n秒内被再次觸發，直接return
        if (timer) return;
        timer = setTimeout(function () {
            callback();
			clearTimeout(timer);
        }, delay)
    }
}
           

參考資料

1. 詳解防抖函數（debounce）和節流函數（throttle）
2. 徹底弄懂函數防抖和函數節流
3. 執行個體解析防抖動（Debouncing）和節流閥（Throttling）