微信小程序之函數防抖節流

函數防抖和函數節流，這兩種方式都能夠優化js的性能

什麼是函數防抖和函數節流

函數防抖：debounce 有防反跳的意思，大致就是指防止重複觸發。

含義：延遲函數執行。即不管debounce函數觸發了多久，只在最後一次觸發debounce函數時，才定義setTimeout，到達間隔時間再執行 需要防抖的函數

函數節流： throttle 有節流閥的意思。大致意思也是節約觸發的頻率

含義：單位時間n秒內，第一次觸發函數並執行，以後 n秒內不管觸發多少次，都不執行。直到下一個*單位時間*n秒，第一次觸發函數並執行，這個n秒內不管函數多少次都不執行。

用處：多用於頁面scroll滾動，或者窗口resize，或者防止按鈕重複點擊等情況

在小程序中使用

封裝一個tool.js工具類

tool.js

/*函數節流*/
function throttle(fn, interval) {
  var enterTime = 0;//觸發的時間
  var gapTime = interval || 300 ;//間隔時間，如果interval不傳，則默認300ms
  return function() {
    var context = this;
    var backTime = new Date();//第一次函數return即觸發的時間
    if (backTime - enterTime > gapTime) {
      fn.call(context,...arguments);
      enterTime = backTime;//賦值給第一次觸發的時間，這樣就保存了第二次觸發的時間
    }
  };
}

/*函數防抖*/
function debounce(fn, interval) {
  var timer;
  var gapTime = interval || 1000;//間隔時間，如果interval不傳，則默認1000ms
  return function() {
    clearTimeout(timer);
    var context = this;
    var args = arguments;//保存此處的arguments，因爲setTimeout是全局的，arguments不是防抖函數需要的。
    timer = setTimeout(function() {
      fn.call(context,...args);
    }, gapTime);
  };
}

export default {
  throttle,
  debounce
};

上邊兩個類中 arguments 和 args 得到的原本是一個數組，運用展開字符串可直接得到一個對象

使用：

import tool from "../../static/js/tool.js";
/*函數節流*/
方法名: tool.throttle(function (e) {
        ...業務邏輯
}, 1000)

/*函數防抖*/
gotoUnlock: tool.debounce(function() {
      ...業務邏輯
}),

// 若不傳參數，則默認爲工具類內的默認參數

總結

函數節流：是減少函數的觸發頻率

函數防抖：是延遲函數執行，並且不管觸發多少次都只執行最後一次。