微信小程序 - 函数防抖 / 函数节流（轮子封装）

前言

如果你不了解这两个概念，请读完前面，如果你了解，请直接复制代码使用即可。

函数节流是减少函数的触发频率；函数防抖是延迟函数执行，且不管触发多少次都只执行最后一次。

函数防抖

延迟函数执行。多用于 input 框输入时，显示匹配的输入内容的情况。

---

函数节流

单位时间 n 秒内，第一次触发函数执行之后不管用户触发多少次都不会执行。

到下一个单位时间 n 秒时，第一次触发函数执行。

多用于页面 scroll 滚动，窗口 resize，防止按钮重复点击等。

---

源码

小程序中使用函数防抖节流一般都将这两种方法封装在公用 js 里。

//common.js

/*函数节流*/
function throttle(fn, interval) {
  var enterTime = 0; //触发的时间
  var gapTime = interval || 300; //间隔时间，如果interval不传值，默认为300ms
  return function() {
	var that = this;
	var backTime = new Date(); //第一次函数return即触发的时间
	if(backTime - enterTime > gapTime) {
	  fn.call(that, arguments);
	  enterTime = backTime; //赋值给第一次触发的时间 保存第二次触发时间
    }
  };
}

/*函数防抖*/
function debounce(fn, interval) {
  var timer;
  var gapTime = interval || 1000; //间隔时间 不传值默认为1000ms
  return function() {
    clearTimeout(timer);
    var that = this;
    var args = arguments; //保存arguments setTimeout是全局的 arguments不是防抖函数需要的
    timer = setTimeout(function() {
	  fn.call(that, args);
    }, gapTime);
  };
}

/*导出*/
export default {
  throttle,
  debounce
};

使用方法

// 导入
import tool from '路径';

Page({

  data: {
    a: 0
  },
  
  // 1. 写自己的函数
  // 2. 传入到 throttle / debounce
  
  // 默认时间(1秒)
  onPageScroll: tool.throttle(function(a){
    console.log(a)
  }),
  
  // 自定义时间
  goUnlock: tool.debounce(function() {
    // ...
  },3000),

})