節流

王振宇發表於2019-03-15
如果你在日常開發中,在滾動事件或者視窗resize事件時需要做一個複雜的計算,如果不限制事件處理函式呼叫的頻率,會加重瀏覽器的負擔,造成效能浪費甚至頁面卡頓。此時我們可以採用防抖(debounce)和節流(throttle)的方式來減少呼叫頻率,同時又不影響實際效果,本文主要講解節流。

所謂節流,就是事件一直被觸發的話,第一次觸發立即執行,接下來每隔一段時間才會觸發一次。

接下來我們理一下思路:

1. 該函式要有一個引數為事件合理觸發後要呼叫的函式,我們定義為fn;

2. 第二個引數為呼叫該函式的物件,即函式執行時的this指向,我們定義為context;

3. 第三個引數為呼叫該函式時要傳入的引數,我們定義為陣列args;

4: 第四個引數為延遲時間,我們定義為delay;

注:函式內部我們還會給fn定義一個屬性,用來接收setTimeout的fn.throttleTimerId

程式碼如下:

let throttle = (fn,context,args,delay=500) => {
  // 每次事件觸發,如果存在fn.debounceATimerId,則結束函式執行,以此限制函式呼叫頻率
  if(fn.throttleTimerId){
    return;
  }else{
    // 呼叫fn,並繫結this為context,引數為args
    fn.apply(context,args);
    // 設定delay毫秒後清除fn.throttleTimerId,以保證函式可以再次被呼叫
    fn.throttleTimerId=setTimeout(() => {
      fn.throttleTimerId = null;
    },delay)
  }
};
複製程式碼

如果有錯誤或者不嚴謹的地方,請給予指正,十分感謝!

相關文章