全手打原創，轉載請標明出處：https://www.cnblogs.com/dreamsqin/p/11305028.html

先重點說一下可能遇到的坑：主要在原本預設引數的設定以及兩個方法的選擇上，看完這篇總結你就知道怎麼回事了~

throttle API走起

_.throttle(func, [wait=0], [options={}])

func (Function): 要節流的函式。

[wait=0] (number): 需要節流的毫秒數。

[options={}] (Object): 選項物件。

[options.leading=true] (boolean): 指定呼叫在節流開始前，預設true。

[options.trailing=true] (boolean): 指定呼叫在節流結束後，預設true。

throttleDemo走起（Vue寫法）

testThrottle: _.throttle(function() {
  console.log("throttle");
}, 5000, {
  leading: true,
  trailing: false
})

testThrottle方法被繫結在一個按鈕上，demo最終的效果是：

1、按鈕點選後控制檯立馬列印了throttle——19:39:00；

2、5秒內點選多次按鈕，最終只打印一次throttle——19:39:05前；

3、5秒後再點選一次，會重新列印throttle——19:39:05後；

PS：lodash預設trailing為true，那麼最終的效果是在點選時會立即列印throttle，且5秒後又會再列印一次，即節流之前和之後都會執行該節流函式。

throttle總結走起

預先設定一個執行週期，當呼叫動作的時刻大於等於執行週期則執行該動作，然後進入下一個新的時間週期。

簡言之：結束時間點不會隨點選改變

debounce API走起

_.debounce(func, [wait=0], [options={}])

func (Function): 要防抖動的函式。

[wait=0] (number): 需要延遲的毫秒數。

[options={}] (Object): 選項物件。

[options.leading=false] (boolean): 指定在延遲開始前呼叫，預設false。

[options.maxWait] (number): 設定 func 允許被延遲的最大值。

[options.trailing=true] (boolean): 指定在延遲結束後呼叫，預設true。

debounce Demo走起

testDebounce: _.debounce(function() {
  console.log("debounce");
}, 2000, {
  leading: true,
  trailing: false
})

testDebounce方法被繫結在一個按鈕上，demo最終的效果是：

1、按鈕點選後控制檯立馬列印了debounce——19:39:00；

2、5秒內點選多次按鈕，最終只打印一次debounce——19:39:05前，假設19:39:04完成了最後一次點選；

3、相對於最後一次點選的5秒後再點選一次，會重新列印debounce——19:39:09後；

PS：lodash預設leading為false、trailing為true，那麼最終的效果是在點選後等待5秒才會列印debounce，即延遲之前不執行函式，而是在延遲之後執行。

debounce 總結走起

當呼叫動作觸發一段時間後，才會執行該動作，若在這段時間間隔內又呼叫此動作則將重新計算時間間隔。

簡言之：結束時間點會隨點選改變

綜上所述，適用情況如下：

throttle

（1）對於鍵盤事件，當用戶鍵入非常頻繁，但我們又必須要在一定時間（閥值）內執行處理函式的時候。例如：一些網頁遊戲的鍵盤事件。

（2）對於滑鼠移動和視窗滾動，滑鼠的移動和視窗的滾動會帶來大量的事件，但是在一段時間內又必須看到頁面的效果。例如：對於可以拖動的div，如果使用debounce，那麼div會在拖動停止後突然跳到目標位置；這時就需要使用throttle。

debounce

（1）對於鍵盤事件，當用戶輸入比較頻繁的時候，可以通過debounce合併鍵盤事件處理。例如：需要在使用者輸入完成時進行字串校驗。

（2）對於ajax請求的情況。例如：當頁面下拉超過一定範圍就通過ajax請求新的頁面內容，這時候可以通過debounce合併ajax請求事件。