react 中使用 lodash 中的 _.throttle

1.場景：

首次調用執行一次，一定時間內再次調用，不再執行。

2.實現

debounce （函數去抖） 多次觸發，只在最后一次觸發時，執行目標函數。

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

throttle （函數節流）限制目標函數調用的頻率，比如：1s內不能調用2次。

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

lodash在opitons參數中定義了一些選項，主要是以下三個：

leading，函數在每個等待時延的開始被調用，默認值為false
trailing，函數在每個等待時延的結束被調用，默認值是true
maxwait，最大的等待時間，因為如果debounce的函數調用時間不滿足條件，可能永遠都無法觸發，因此增加了這個配置，保證大於一段時間后一定能執行一次函數
根據leading和trailing的組合，可以實現不同的調用效果：

leading-false，trailing-true：默認情況，即在延時結束后才會調用函數
leading-true，trailing-true：在延時開始時就調用，延時結束后也會調用
leading-true, trailing-false：只在延時開始時調用
deboucne還有cancel方法，用於取消防抖動調用

方式一：

test = () => {
  console.log('--------------11111---------------');
  this.fun();
}

fun = _.debounce(function(e){
  console.log('--------------22222---------------');
}, 5000,{
  leading: true,
  trailing: false,
})

首次點擊時執行，連續點擊且時間間隔在5s之內，不再執行，間隔在5s之外再次點擊，執行。

方式二：

test = () => {
  console.log('--------------11111---------------');
  this.fun();
}

fun = _.throttle(function(e){
  console.log('--------------22222---------------');
}, 5000,{
  leading: true,
  trailing: false,
})

首次點擊時執行，連續點擊且間隔在5s之內，5s之后自動執行一次（注：連續點擊次數時間之后小於5s，則不會自動執行），間隔在5s之外再次點擊，執行。

.