前端基本功（九）:完全理解函數節流與防抖，以及我是如何在平常開發中應用函數節流與防抖的。

1. 如何理解函數節流與函數防抖

1. 函數節流（throttle）：從字面上理解，就是節約函數的執行次數(約定必定的時間執行一次)，在咱們進行一些高頻執行函數的操做中能夠應用。
2. 函數防抖（debounce）：從字面上理解，防止函數抖動，那麼函數爲何會抖動？就是在咱們尚未徹底確認此刻操做的時候頻繁執行函數，防抖就是合併咱們的函數執行（多個欲執行函數到約定的時間點後再合併執行）。只有觸發操做後超過指定的間隔說明這一次觸發纔有效，不然就要從新計時等待。

2. 手動實現節流與防抖

1. 函數節流

1. 實現思路：利用定時器在第一次觸發函數時打一個開關，表明我已經進入了倒計時，在指定的時間後會觸發，可是你在這個指定的時間以前都經過判斷這個開關是打開狀態就沒法再次觸發函數，等到倒計時結束開關關閉，下次執行就能夠再次進行倒計時操做。也就實現了約定必定的時間執行一次函數的操做。

2. 簡單代碼實現：

   function throttle(fn, delay = 500) {
     let canRun = true; 
     return function() {
       // 這裏實際上是使用了閉包的原理，函數內部保存使用了函數外部的變量。
       if(!canRun) return;
       canRun = false;
       setTimeout(() => {
         fn.apply(this, arguments);
         canRun = true;
       }, delay)
     }
   }
   複製代碼

2. 函數防抖

1. 實現思路：仍是一樣須要利用定時器，當咱們執行這個函數時，會生成一個定時器，可是若是你重複執行這個函數，每次執行函數的第一步是清除上一次的定時器，這樣就能夠達成只有觸發操做後超過指定的間隔說明這一次觸發纔有效，不然就要從新計時等待。

2. 簡單代碼實現：

   function debounce(fn, delay = 500) {
     let timeout = null;
     return function() {
       clearTimeout(timeout);
       timeout = setTimeout(() => {
         fn.apply(this, arguments);
       }, delay)
     }
   }
   複製代碼

3. 我在開發中使用的案例

1. 通常狀況下，咱們在平常開發中都會使用一些函數庫好比說loadsh、underscore等。這些類庫通常都已經封裝好了throttle、debounce等函數，咱們通常直接使用便可。
2. 前段時間產品就提出了一個需求：咱們只須要在一個輸入框中輸入一個客戶的關鍵字，就能夠模糊篩選中匹配指定的客戶。若是說，咱們只要監聽onchange事件就請求後臺接口匹配的數據便可。可是這樣致使的問題是，用戶僅僅還在輸入法聯想階段或者是正在輸入狀態下，也會到此請求接口。那麼這種情景下就可使用咱們debounce函數來進行優化。

// 案例一：這裏使用了裝飾器包裝了loadsh中的debounce
  @Debounce(300)
  onSearch(name) {
    this.props.dispatch({type: 'sysUser/queryOrgUser', payload: {
      body: {
        name,
        role: USERROLE_TYPE.ACCOUNT_MANAGEMENT,
      }
    }});
  }

// 案例二：這裏直接用的loadsh的debounce包裝了咱們方法
  const debounceCalculate = debounce(this.trialTranslateMoney, 500);
  if(value <= num) {
    debounceCalculate({
      investAmt: value
    })
  }else {
    this.money = num;
  }
複製代碼