理由

有時候開發者會需要註冊一些回撥函式在瀏覽器的scroll和resize事件上, 但是scroll和resize這類事件觸發非常頻繁, 而實際使用者並不需要感知這麼多的事件產生, 造成大量函式觸發, 而如果這些函式和動畫有關, 會給瀏覽器造成巨大壓力, 節流函式可以很好的解決這個問題.

節流函式原理是設定一個閾值, 在一定時間內的觸發但並不真實呼叫函式, 從而做到效能的優化, 實現的方式有反跳和節流. 反跳是呼叫動作n毫秒內, 才會執行該動作, 若在n毫秒內又呼叫此動作將重新計算時間. 節流則是先設定一個執行週期, 當呼叫的時刻大於等於執行週期時則執行並進入下一個週期, 下面是一個反跳函式的例子.

程式碼

function debounce(idle, func) {//接收兩個引數, 間隔時間和實際呼叫函式
  let last;//儲存非同步呼叫實際函式, 通過閉包賦值不被銷燬
  return function () {
    let ctx = this,//存放函式this, 和變數給下面函式使用
        args = arguments;
    clearInterval(last);//如果該函式被呼叫, 則清除上一個非同步呼叫的實際函式
    last = setTimeout(function () {//重設非同步呼叫實際函式
      func.apply(ctx, args);//讓實際函式在間隔設定的時間後呼叫
 

    }, idle)
  }
}