函數防抖是一種優化技術，用于處理頻繁觸發的事件。實現步驟包括：1. 設置一個定時器，每次事件觸發時清除之前的定時器并重新設置新的定時器；2. 如果在定時器時間內沒有新的事件觸發，則執行定義的函數。
在 JavaScript 中，函數防抖（Debounce）是一種優化技術，常用于處理頻繁觸發的事件，比如窗口resize、滾動事件或輸入框的keyup事件。防抖的核心思想是，在一定時間內，如果事件被頻繁觸發，我們只執行最后一次觸發的事件處理函數。這對于提高性能、減少不必要的計算和api調用非常有用。
我第一次接觸函數防抖是在開發一個實時搜索功能時。那時，每次用戶輸入一個字符，代碼都會立即發起一個請求到后端，這顯然是低效且浪費資源的。通過實現防抖，我成功地將請求頻率大幅降低，顯著提升了用戶體驗。
實現防抖的基本思路是設置一個定時器，每次事件觸發時，都會清除之前的定時器，并重新設置一個新的定時器。如果在定時器時間內沒有新的事件觸發，那么定時器到期時就會執行我們定義的函數。
立即學習“Java免費學習筆記（深入）”；
來看一個具體的實現：
function debounce(func, delay) { let timeoutId; return function (...args) { clearTimeout(timeoutId); timeoutId = setTimeout(() => func.apply(this, args), delay); }; } // 使用示例 const handleSearch = debounce((query) => { console.log(`Searching for: ${query}`); }, 300); document.getElementById('searchInput').addEventListener('keyup', (e) => { handleSearch(e.target.value); });
這個實現簡單而有效，但需要注意的是，每次事件觸發時，我們都需要清除之前的定時器，這可能會帶來一些性能開銷。特別是在高頻觸發的情況下，clearTimeout 和 setTimeout 的調用可能會成為瓶頸。
為了優化這個實現，我們可以考慮使用 requestAnimationFrame 來替代 setTimeout，因為它可以更高效地處理高頻事件，并且不會阻塞主線程：
function debounce(func, delay) { let lastCallTime = 0; return function (...args) { const now = Date.now(); if (now - lastCallTime >= delay) { func.apply(this, args); lastCallTime = now; } }; } // 使用示例 const handleSearch = debounce((query) => { console.log(`Searching for: ${query}`); }, 300); document.getElementById('searchInput').addEventListener('keyup', (e) => { window.requestAnimationFrame(() => handleSearch(e.target.value)); });
這個版本的防抖函數使用了時間戳來判斷是否應該執行函數，避免了頻繁的定時器操作。但它有一個缺點，就是在第一次觸發時，可能會立即執行函數，而不是等待指定的延遲時間。這在某些場景下可能不是我們想要的。
在實際應用中，我發現防抖函數的使用需要謹慎考慮。特別是當你需要在用戶停止輸入后立即獲取結果時，防抖可能不合適，因為它會延遲響應。在這種情況下，你可能需要考慮使用節流（Throttle）來限制事件處理函數的執行頻率。
另一個需要注意的點是，防抖函數通常會返回一個新的函數，這意味著你需要小心管理這些函數的生命周期，特別是在組件卸載或頁面卸載時，確保清理這些函數，避免內存泄漏。
總的來說，函數防抖是一個強大的工具，但在使用時需要根據具體的業務場景來調整和優化。通過不斷的實踐和思考，你會找到最適合你的實現方式。
