前端知識速記：節流與防抖
什么是防抖？
防抖是一種控制事件觸發頻率的方法，通常用于處理用戶頻繁觸發事件的場景。防抖的核心思想是將多個連續觸發事件合并為一個事件，以減少執行次數。它在以下場景中特別有效：
- 輸入框輸入事件：實時搜索、輸入驗證等。
- 窗口調整大小（resize）事件：減少窗口大小變化時的處理頻率。
防抖的實現
防抖的實現依賴于計時器。每次觸發事件時，都會重置計時器，只有在事件停止觸發一定時間后才執行該事件處理函數。
function debounce(fn, delay) {let timer = null;return function(...args) {if (timer) clearTimeout(timer);timer = setTimeout(() => {fn.apply(this, args);}, delay);};
}// 使用示例
const input = document.getElementById('input');
input.addEventListener('input', debounce(() => {console.log('用戶輸入:', input.value);
}, 300));
在這個例子中，輸入事件會在用戶停止輸入后 300 毫秒觸發，避免了頻繁的輸出。
什么是節流？
節流與防抖的目標相似，但其實現方式有所不同。節流是指限制事件的觸發頻率，保證在一定時間內事件只會執行一次。節流特別適合以下場景：
- 滾動監聽：限制滾動事件的處理，避免性能瓶頸。
- 定時器定時執行任務：實現定期執行的功能。
節流的實現
節流可以通過時間戳或定時器實現。這里展示使用時間戳進行節流的示例：
function throttle(fn, limit) {let lastTime = 0;return function(...args) {const now = Date.now();if (now - lastTime >= limit) {lastTime = now;fn.apply(this, args);}};
}// 使用示例
window.addEventListener('scroll', throttle(() => {console.log('用戶在滾動');
}, 500));
在這個例子中，用戶滾動事件的處理函數每 500 毫秒最多觸發一次，以減少計算量和提高性能。
節流與防抖的區別
- 觸發時機：防抖在事件觸發后的一段時間內若再次觸發則會重新計時，保證事件只執行一次；而節流是保證在一定時間內只執行一次，無論事件觸發了多少次。
- 適用場景：防抖適用于用戶輸入等需要等待用戶停止操作的場景；節流適用于需要在一定時間內持續操作的場景，例如滾動或窗口縮放。
