小程序防抖封装

小程序防抖

小程序事件绑定不支持直接执行

直接使用自执行函数绑定其结果是不被执行

<van-button size="large" 
            type="primary" 
            custom-class="authorize-button" 
            bind:click="debounce()">
    微信账号授权登录
</van-button>

调用wx授权需要手动触发的，使用setTimeout等宏任务会授权失效

    debounce: (function (fn:Function,time:number:300) {
            let setT;
            return function (this:any) {
                if (setT) { clearTimeout(setT) }
                setT = setTimeout(() => {
                   fn.call(this);
                }, time);
            }
        })()
        

调整为计数形式防抖，最终通过

1. 调用部分wxml和ts执行部分 在wxml中不能直接使用eventClick()自执行，它应该只是一个

<van-button size="large" type="primary" custom-class="authorize-button" bind:click="eventClick">
				微信账号授权登录
</van-button>

 eventClick: utils.debounce.call(this, async function (this: any) {
      await pub.getUserProfile();
      this.triggerEvent("onclick");
    }),

2. 防抖函数，防止位置为utils文件下的utils.ts内部 使用ts开发小程序时，使用call或apply直接改变this指针的形式会出现this报错提示，使用在参数中定义this:any的形式定义this类型，微任务不在非手动点击排除范围,在防抖回调函数中的this指针也许同样定义，此时回调中的this指向当前类。

// TODO:防抖函数
export let debounce = function (fn: Function, time: number = 300) {
  let first = 0;
  let second = 0;
  return function (this: any) {
    if (second && first) {
      //TODO: 3、第三次点击记录
      first = second;  // first 取上次最后点击时间
      second = Date.now(); // 最后一次点击取 
    } else if (first && !second) {
       //TODO: 2、第二次点击记录
      second = Date.now();
    } else {
      //TODO: 1、第一次点击记录
      first = Date.now();
    }
    console.log(first, second, (second - first < time));
    //TODO: 如果有二次点击且二次点击-一次点击时间<指定时间则return
    if (second && (second - first < time)) {
      return
    }
    fn.call(this);
  }

}