概念：

函式防抖(debounce)：觸發高頻事件後n秒內函式只會執行一次，如果n秒內高頻事件再次被觸發，則重新計算時間。

函式節流(throttle)：高頻事件觸發，但在n秒內只會執行一次，所以節流會稀釋函式的執行頻率。

函式節流（throttle）與函式防抖（debounce）都是為了限制函式的執行頻次，以優化函式觸發頻率過高導致的響應速度跟不上觸發頻率，出現延遲，假死或卡頓的現象。

1、函式防抖(debounce)

• 實現方式：每次觸發事件時設定一個延遲呼叫方法，並且取消之前的延時呼叫方法
• 缺點：如果事件在規定的時間間隔內被不斷的觸發，則呼叫方法會被不斷的延遲

  //防抖debounce程式碼：
   
  
  function debounce(fn,delay) {
      var timeout = null; // 建立一個標記用來存放定時器的返回值
      return function (e) {
          // 每當使用者輸入的時候把前一個 setTimeout clear 掉
          clearTimeout(timeout); 
          // 然後又建立一個新的 setTimeout, 這樣就能保證interval 間隔內如果時間持續觸發，就不會執行 fn 函式
          timeout = setTimeout(() => {
              fn.apply(
   
  this, arguments);
          }, delay);
      };
  }
  // 處理函式
  function handle() {
      console.log('防抖：', Math.random());
  }
          
  //滾動事件
  window.addEventListener('scroll', debounce(handle,500));

  2、函式節流(throttle)

• 實現方式：每次觸發事件時，如果當前有等待執行的延時函式，則直接return

  //節流throttle程式碼：
  function throttle(fn,delay) {
      let canRun = true; // 通過閉包儲存一個標記
      return function () {
           // 在函式開頭判斷標記是否為true，不為true則return
          if (!canRun) return;
           // 立即設定為false
          canRun = false;
          // 將外部傳入的函式的執行放在setTimeout中
          setTimeout(() => { 
          // 最後在setTimeout執行完畢後再把標記設定為true(關鍵)表示可以執行下一次迴圈了。
          // 當定時器沒有執行的時候標記永遠是false，在開頭被return掉
              fn.apply(this, arguments);
              canRun = true;
          }, delay);
      };
  }
   
  function sayHi(e) {
      console.log('節流：', e.target.innerWidth, e.target.innerHeight);
  }
  window.addEventListener('resize', throttle(sayHi,500));
   
  

  總結：
  函式防抖：將多次操作合併為一次操作進行。原理是維護一個計時器，規定在delay時間後觸發函式，但是在delay時間內再次觸發的話，就會取消之前的計時器而重新設定。這樣一來，只有最後一次操作能被觸發。

  函式節流：使得一定時間內只觸發一次函式。原理是通過判斷是否有延遲呼叫函式未執行。

  區別： 函式節流不管事件觸發有多頻繁，都會保證在規定時間內一定會執行一次真正的事件處理函式，而函式防抖只是在最後一次事件後才觸發一次函式。 比如在頁面的無限載入場景下，我們需要使用者在滾動頁面時，每隔一段時間發一次 Ajax 請求，而不是在使用者停下滾動頁面操作時才去請求資料。這樣的場景，就適合用節流技術來實現。