在 JavaScript 中,防抖(debounce)和節流(throttle)是兩種常用的優化高頻率觸發事件的技術。它們都可以提升性能,但實現方式和應用場景略有不同。
防抖(debounce):
防抖的核心思想是在一定時間內,事件被連續觸發時,只執行最后一次觸發的事件處理函數。適用于輸入框實時搜索、表單驗證等場景。
實現方式:
function debounce(func, wait) {
let timeout;
return function () {
const context = this;
const args = arguments;
clearTimeout(timeout);
timeout = setTimeout(() => {
func.apply(context, args);
}, wait);
};
}
節流(throttle):
節流的核心思想是在一定時間內,事件被連續觸發時,只執行一次事件處理函數。適用于滾動加載、鼠標移動等場景。
實現方式:
function throttle(func, wait) {
let lastTime = 0;
return function () {
const context = this;
const args = arguments;
const nowTime = Date.now();
if (nowTime - lastTime > wait) {
func.apply(context, args);
lastTime = nowTime;
}
};
}
如何提升性能:
總之,防抖和節流是兩種有效提升 JavaScript 性能的技術,它們可以減少事件處理函數的執行次數,避免不必要的計算,提高代碼的執行效率。在實際開發中,根據具體場景選擇合適的技術進行優化。