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

發表時間：2021-2-3

發布人：葵宇科技

浏覽次數：57

函數防抖和(hé)函數節流都是老生常談的問(wèn)題了。這兩種方式都能優化 js 的性能。有些人可(kě)能會搞混兩個(gè)的概念。所以，我以自己的理解，來解釋這兩個(gè)概念的含義。并且列舉在小程序中(zhōng)這兩個(gè)方法的使用。

函數防抖：英文(wén) debounce 有防反跳的意思，大緻就是指防止重複觸發。

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

用處：多用于 input 框輸入時，顯示匹配的輸入内容的情況。

函數節流：英文(wén) throttle 有節流閥的意思。大緻意思也是節約觸發的頻率

那麼，函數節流，真正的含義是：單位時間n秒内，第一次觸發函數并執行，以後 n秒内不管觸發多少(shǎo)次，都不執行。直到下(xià)一個(gè)單位時間n秒，第一次觸發函數并執行，這個(gè)n秒内不管函數多少(shǎo)次都不執行。

用處：多用于頁面scroll滾動(dòng)，或者窗口resize，或者防止按鈕重複點擊等情況

其實如(rú)果隻根據 控制函數觸發的頻率是不好區分這兩個(gè)概念的。我認為兩個(gè)函數都能達到防止重複觸發的功能。但是函數防抖是 n秒後延遲執行；而函數節流是立馬執行，n秒後再立馬執行。

在小程序中(zhōng)，函數防抖、函數節流的使用方式：

一般都會把這兩種方法封裝在公用的 js 中(zhōng)：

tool.js

/*函數節流*/
function throttle(fn, interval) {
  var enterTime = 0;//觸發的時間
  var gapTime = interval || 300 ;//間隔時間，如(rú)果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;//間隔時間，如(rú)果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
};

使用：

import tool from "../../static/js/tool.js";
Page({
   data:{
    win_scrollTop:0
   },
   onPageScroll: tool.throttle(function(msg){
      this.setData({
        win_scrollTop: msg[0].scrollTop
      });
   }),
   gotoUnlock: tool.debounce(function() {
      this.saveUserInfo();
   }),
   saveUserInfo:function(){
      console.log(111)
   }
})