個人博客：haichenyi.com。感謝關注

一. 目錄

• 一–目錄
• 二–防抖
• 三–節流
• 四–進階應用
• 五–總結

二. 防抖（Debounce）

??防抖（Debebounce）和節流（Throttle）都是前端開發中用于優化高頻事件性能的兩種技術。他們的核心目的是減少函數的不必要的調用頻率，但實現方式和場景有所不同。
??原理： 事件觸發后，開始計時，若在規定時間內，沒有再觸發該事件，則執行事件。若在規定時間內，又觸發了該事件，則重新計時。
??適用場景： 輸入框的搜索事件，窗口大小調整，按鈕的點擊事件等等

function debounce(func, delay) {let timer;return function (...args) {//清空上一次的定時器clearTimeout(timer)timer = setTimeout(() => {//綁定this關鍵字和參數，并立即執行//apply,call,bind三者的區別，前面的博客中講過了func.apply(this, args)}, delay);}
}// 使用示例
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', debounce(function() {console.log('發起搜索請求');
}, 500));

??特點：

• 高頻操作停止后才會執行
• 若高頻操作不停止，則該事件永遠不會執行
  

三. 節流（Throttle）

??原理： 在規定時間間隔內，不論事件觸發多少次，函數只會執行一次。
??適用場景??： 滾動事件（scroll）、鼠標移動（mousemove）、游戲中的射擊頻率限制等。

function throttle(func, delay) {let lastTime;return function (...args) {let now = Date.now()if (now - lastTime >= delay) {func.apply(this, args)lastTime = now}}
}// 使用示例
window.addEventListener('scroll', throttle(function() {console.log('處理滾動事件');
}, 200));

??特點：

• 不管事件觸發多少次，都按照固定頻率執行，稀釋執行的次數。
• 保證高頻操作下函數周期性執行。

四. 進階應用

（4.1）立即執行的防抖，第一次觸發立即執行，后續觸發防抖：

function debounce(func, delay) {let timer;return function (...args) {//如果timer是空，則立刻執行let immediately = !timer//第一次調用timer就是空，則立刻執行，短時間內再次觸發，清空上一次的定時器，clearTimeout(timer)if (immediately) {func.apply(this, args)}timer = setTimeout(() => {timer = null}, delay);}
}

（4.2）頭節流（Leading）?：期望第一次觸發立即執行

function throttle(func, delay) {let lastTime = 0;return function (...args) {let now = Date.now()// 計算剩余時間（若首次觸發則剩余時間 <= 0）let remaining = delay - (now - lastTime)if (remaining <= 0) {func.apply(this, args)lastTime = now}}
}

（4.3）尾節流（Trailing）：保證最后一次觸發，邏輯會執行

function throttle(func, delay) {let timer = null;return function (...args) {if (!timer) {timer = setTimeout(() => {func.apply(this, args)timer = null}, delay);}}
}

五. 總結

特性?	防抖?	節流?
執行時機?	高頻事件結束后，規定時間內執行	高頻事件按照頻率執行
適用場景?	輸入框，提交按鈕等	滑動事件，動畫渲染
極端情況?	持續觸發，不會執行	持續觸發時，函數按規律執行

?防抖??： 合并多次操作為一次，適合“最終狀態”場景（如輸入停止后搜索）。
??節流??： 稀釋執行頻率，適合持續高頻事件（如滾動事件）。

推薦使用Lodash的方法，不需要自己手動去寫，了解防抖節流的原理即可。