函數防抖和函數節流

概念

　函數防抖（debounce）

函數防抖，就是指觸發事件後在 n 秒內函數只能執行一次，若是在 n 秒內又觸發了事件，則會從新計算函數執行時間。

　　簡單的說，當一個動做連續觸發，則只執行最後一次。

　　打個比方，坐公交，司機須要等最後一我的進入才能關門。每次進入一我的，司機就會多等待幾秒再關門。

　函數節流（throttle）

限制一個函數在必定時間內只能執行一次。

　　舉個例子，乘坐地鐵，過閘機時，每一個人進入後3秒後門關閉，等待下一我的進入。

函數防抖的應用場景

　連續的事件，只需觸發一次回調的場景有：

• 搜索框搜索輸入。只需用戶最後一次輸入完，再發送請求
• 手機號、郵箱驗證輸入檢測
• 窗口大小Resize。只需窗口調整完成後，計算窗口大小。防止重複渲染。

函數節流的應用場景

　間隔一段時間執行一次回調的場景有：

• 滾動加載，加載更多或滾到底部監聽
• 谷歌搜索框，搜索聯想功能
• 高頻點擊提交，表單重複提交

函數防抖（debounce）

函數防抖的簡單實現：

1 const _.debounce = (func, wait) => {
2   let timer;
3 
4   return () => {
5     clearTimeout(timer);
6     timer = setTimeout(func, wait);
7   };
8 };

函數防抖在執行目標方法時，會等待一段時間。當又執行相同方法時，若前一個定時任務未執行完，則 clear 掉定時任務，從新定時。

函數節流（throttle）

1）函數節流的 setTimeout 版簡單實現

 1 const _.throttle = (func, wait) => {
 2   let timer;
 3 
 4   return () => {
 5     if (timer) {
 6       return;
 7     }
 8 
 9     timer = setTimeout(() => {
10       func();
11       timer = null;
12     }, wait);
13   };
14 };

　　函數節流的目的，是爲了限制函數一段時間內只能執行一次。所以，經過使用定時任務，延時方法執行。在延時的時間內，方法若被觸發，則直接退出方法。從而，實現函數一段時間內只執行一次。

2）函數節流的時間戳版簡單實現
根據函數節流的原理，咱們也能夠不依賴 setTimeout實現函數節流。

 1 const throttle = (func, wait) => {
 2   let last = 0;
 3   return () => {
 4     const current_time = +new Date();
 5     if (current_time - last > wait) {
 6       func.apply(this, arguments);
 7       last = +new Date();
 8     }
 9   };
10 };

　　其實現原理，經過比對上一次執行時間與本次執行時間的時間差與間隔時間的大小關係，來判斷是否執行函數。若時間差大於間隔時間，則馬上執行一次函數。並更新上一次執行時間。

異同比較

相同點：

• 均可以經過使用 setTimeout 實現。
• 目的都是，下降回調執行頻率。節省計算資源。

不一樣點：

• 函數防抖，在一段連續操做結束後，處理回調，利用 clearTimeout 和 setTimeout 實現。函數節流，在一段連續操做中，每一段時間只執行一次，頻率較高的事件中使用來提升性能。
• 函數防抖關注必定時間連續觸發，只在最後執行一次，而函數節流側重於一段時間內只執行一次。