小程序按钮防抖节流控制

转载：https://blog.csdn.net/weixin_43789195/article/details/107511786?spm=1001.2101.3001.6650.1&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2%7Edefault%7ECTRLIST%7Edefault-1.no_search_link

函数节流： 英文 throttle 有节流阀的意思。大致意思也是 节约触发的频率

那么，函数节流，真正的含义是：单位时间n秒内，第一次触发函数并执行，以后 n秒内不管触发多少次，都不执行。直到下一个单位时间n秒，第一次触发函数并执行，这个n秒内不管函数多少次都不执行。

用处：多用于页面scroll滚动，或者窗口resize，或者防止按钮重复点击等情况

函数防抖： 英文 debounce 有防反跳的意思，大致就是指防止重复触发。

那么，函数防抖，真正的含义是：延迟函数执行。即不管debounce函数触发了多久，只在最后一次触发debounce函数时，才定义setTimeout，到达间隔时间再执行 需要防抖的函数。

用处：多用于 input 框 输入时，显示匹配的输入内容的情况。
使用：封装在util.js里

// 函数节流
function throttle(fn, interval = 2000) {
  var enterTime = 0; //触发的时间
  var gapTime = interval; //间隔时间，如果interval不传，则默认2000ms
  return function (e) {
    var that = this;
    var backTime = new Date(); //第一次函数return即触发的时间
    if (backTime - enterTime > gapTime) {
      fn.call(that, e, arguments);
      enterTime = backTime; //赋值给第一次触发的时间，这样就保存了第二次触发的时间
    }
  };
}
// 函数防抖
function debounce(fn, interval = 2000) {
  var timer;
  var gapTime = interval; //间隔时间，如果interval不传，则默认2000ms
  return function (e) {
    clearTimeout(timer);
    var that = this;
    var args = arguments; //保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
    timer = setTimeout(function () {
      fn.call(that, e, args);
    }, gapTime);
  };
}

调用

var uril = require('../../utils/util')
 
Page({
  onPageScroll: uril.throttle(function () {
    console.log(111)
  }),
  gotoUnlock: uril.debounce(function () {
    console.log(222)
  }),
 
})