在前端開發中，我們經常會遇到一些高頻觸發的事件，比如：頁面滾動，輸入框輸入，鼠標移動，按鈕點擊。些事件若頻繁觸發，會導致性能下降甚至頁面卡頓。為了優化這種場景，前端開發者經常使用兩種技術手段：防抖（Debounce） 和 節流（Throttle）。

一、防抖（Debounce）

1.1 什么是防抖？

防抖是一種將多次高頻操作合并為最后一次執行的技術。 簡單來說，設定一個延遲時間，當事件連續觸發時，只有在最后一次觸發后的 n 毫秒內不再觸發，才執行對應操作。

舉個栗子，你在打字搜索框中輸入關鍵字，系統不希望你每打一個字就發一次請求，而是等待你不再輸入 500ms 后再發一次請求 —— 這就是典型的防抖場景。

1.2 防抖的實現

export function debounce<T extends (...args: any[]) => void>(func: T,delay: number = 500
): (...args: Parameters<T>) => void {// timeoutId 用于保存當前的定時器 ID，以便后續清除let timeoutId: ReturnType<typeof setTimeout> | null// 返回一個新的函數，接受和原函數相同的參數return function (...args: Parameters<T>) {if (timeoutId) {clearTimeout(timeoutId)}timeoutId = setTimeout(() => {func(...args)}, delay)}
}

使用示例

// 使用示例：給輸入框添加防抖效果，延遲 500ms 執行搜索操作
const searchInput = document.getElementById('search') as HTMLInputElement;
searchInput.addEventListener('input', debounce((e: Event) => {const target = e.target as HTMLInputElement;console.log('搜索關鍵詞：', target.value);
}, 500));

二、節流（Throttle）

2.1 什么是節流？

**節流是指將高頻事件限制在一定時間間隔內只執行一次。**簡單來說，無論事件觸發多少次，只在每 n 毫秒內執行一次函數。
舉個栗子，你在監聽瀏覽器窗口滾動來實現懶加載，如果每滾動 1px 就執行一次加載，會造成性能極大浪費。節流可以控制事件每隔 200ms 執行一次，從而達到性能優化的目的。

2.2 節流的實現方式

時間戳實現

// 節流函數，確保在一定時間間隔內同一事件只執行一次
function throttle(fn: Function, delay: number): Function {let lastTime: number = 0;// 返回一個新的函數，處理觸發的事件return function (...args: any[]) {const now: number = Date.now();// 判斷是否超過指定的時間間隔if (now - lastTime >= delay) {lastTime = now;// 使用 apply 調用函數，確保 this 和參數正確fn.apply(this, args);}};
}

定時器實現

/*** 節流函數（定時器版本）* 在 delay 間隔內只允許執行一次函數，多次觸發只響應第一次，后續在間隔后再次允許執行*/
function throttleWithTimer(fn: Function, delay: number): Function {let timer: ReturnType<typeof setTimeout> | null = null;return function (...args: any[]) {// 如果定時器還在運行中，直接跳過本次觸發if (timer) return;// 啟動定時器，delay 毫秒后清除 timer，并執行函數timer = setTimeout(() => {fn.apply(this, args);timer = null; // 重置定時器，允許下一次觸發}, delay);};
}

使用示例

window.addEventListener('scroll', throttleWithTimer(() => {console.log('滾動事件觸發（定時器節流）');
}, 200));

三、防抖與節流的對比

特性	防抖（Debounce）	節流（Throttle）
執行時機	停止觸發后執行一次	固定時間間隔內執行一次
使用目的	減少觸發次數	控制觸發頻率
常見場景	搜索輸入、按鈕防重復點擊	滾動監聽、頁面resize等

四、總結

防抖與節流是前端性能優化中非常常見的技巧，掌握它們可以有效提升用戶體驗，減少不必要的資源浪費。記住一句話總結：防抖關注的是最后一次；節流關注的是間隔時間內的第一次。