>[danger]實現節流函數和防抖函數 >[info]建議回答 - 節流：是在每個時間段里，最多只允許運行一次。比如說resize調整窗口，在調整窗口的過程中，事件一直在高頻率的觸發，可以利用節流函數讓其在一定的間隔時間段內最多觸發一次。 - 防抖：在高頻調用中，只有足夠的空閑時間，代碼才會執行一次，常見的就是input的change事件，只有停頓輸入的事件大于指定的時間，代碼才會執行一次。 >[info]技術詳解 JavaScript 節流（throttle）和防抖（debounce）是兩種常見的前端性能優化技術，用于限制一些高頻率的操作或事件的執行次數。 ## 節流 節流是指在一定時間內只執行一次某個操作或事件。通過節流機制，可以有效地限制高頻率操作或事件的執行次數，從而減輕瀏覽器的負擔、提升頁面性能和用戶體驗。 ### 應用場景 節流適用于以下場景： * 窗口調整、滾動等事件的處理。 * 頻繁的輸入框輸入驗證。 * 鼠標移動、拖拽等事件的處理。 ### 實現方式 常見的實現方式包括時間戳和定時器兩種方式。 1. 時間戳方式：記錄上一次執行的時間戳，當當前時間戳 - 上一次執行的時間戳 >= 指定時間間隔時，才執行相應的操作或事件；否則不執行。代碼如下： ``` function throttle(func, wait) { let lastTime = 0; return function() { const context = this; const args = arguments; const currentTime = +new Date(); if (currentTime - lastTime > wait) { func.apply(context, args); lastTime = currentTime; } }; } ``` 2. 定時器方式：使用定時器控制函數的執行次數，在指定時間間隔內，如果有多個操作或事件被觸發，則只執行最后一次操作或事件。代碼如下： ``` function throttle(func, wait) { let timeout = null; return function() { const context = this; const args = arguments; if (!timeout) { timeout = setTimeout(function() { func.apply(context, args); timeout = null; }, wait); } }; } ``` ## 防抖 防抖是指在一定時間內，只有最后一次操作或事件才會被執行。通過防抖機制，可以限制連續快速的操作或事件的執行次數，從而減少瀏覽器的計算量、提升頁面性能和用戶體驗。 ### 應用場景 防抖適用于以下場景： * 搜索框輸入聯想。 * 頻繁的點擊或提交操作。 * 窗口大小調整、滾動等事件的處理。 ### 實現方式 防抖的實現方式與節流類似，也有時間戳和定時器兩種方式。 1. 時間戳方式：記錄上一次執行的時間戳，當當前時間戳 - 上一次執行的時間戳 >= 指定時間間隔時，才執行相應的操作或事件；否則重新計時。代碼如下： ``` function debounce(func, wait) { let timeout = null; return function() { const context = this; const args = arguments; const currentTime = +new Date(); if (timeout) clearTimeout(timeout); if (currentTime - lastTime > wait) { func.apply(context, args); lastTime = currentTime; } else { timeout = setTimeout(function() { func.apply(context, args); }, wait); } }; } ``` 2. 定時器方式：使用定時器控制函數的執行，在指定時間間隔內，如果有多個操作或事件被觸發，則只執行最后一次操作或事件。代碼如下： ``` function debounce(func, wait) { let timeout = null; return function() { const context = this; const args = arguments; if (timeout) clearTimeout(timeout); timeout = setTimeout(function() { func.apply(context, args); }, wait); }; } ``` ## 總結 JavaScript 節流和防抖是常見的前端性能優化技術，可以有效地限制高頻率操作或事件的執行次數，從而提升頁面性能和用戶體驗。 節流和防抖的實現方式較為相似，常見的包括時間戳方式和定時器方式。 應用場景也有所不同，節流適用于窗口調整、輸入框輸入驗證等場景，而防抖適用于搜索框聯想、點擊提交等場景。 在實際開發中，可以根據具體場景選擇合適的優化技術，提升頁面性能和用戶體驗。 >參考鏈接 [鏈接](https://www.html5iq.com/frontend/601cac123a5920292e6f94a0)