微信小程序節流使用方法

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

那么，函數節流，真正的含義是：單位時間n秒內，第一次觸發函數並執行，以后 n秒內不管觸發多少次，都不執行。直到下一個單位時間n秒，第一次觸發函數並執行，這個n秒內不管函數多少次都不執行。

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

 

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

1，頁面新建，書寫一下代碼：

/*函數節流*/
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
  };

頁面調用：

import tool from "../../until/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)
   }
})