在Web開發中,防抖(Debouncing)和節流(Throttling)是兩種常用的優化技術,用于提高頁面性能和用戶體驗。它們通過限制函數執行的頻率來減少計算資源的消耗,尤其是在處理頻繁觸發的事件時,如窗口大小調整、滾動、鍵盤輸入等。
1、防抖(Debouncing)
防抖技術的核心思想是在事件頻繁觸發的情況下,只有在事件觸發的一段時間后沒有再次觸發事件時,才執行目標函數。如果在這段時間內事件再次被觸發,則重新計時。
1.1、應用場景
- 輸入框實時搜索優化
- 窗口大小調整(resize)事件處理
- 按鈕提交事件(防止多次點擊)
1.2、實現示例
const debounce = (func, wait) => {let timeout;return function() {const context = this;const args = arguments;clearTimeout(timeout)