vue自定义指令之防抖函数

在项目中会遭遇到用户连续点击多次按钮的情况，

这个时候就需要使用防抖函数，在一定时间内只触发一次函数执行。

实现

在 Vue 项目中，在 src > utils 目录下新建 Debounce.js

Debounce.js

/**
 * 一个简单的函数防抖
 * @param {Function} fun 需要限制执行频率的函数
 * @param {Number} delay 延迟时间，这段时间过后，才可触发第二次
 */
export default function (fun, delay) {
  // 记录上一次函数触发的时间
  var timer = null;
  var debounced = function () {
    var ctx = this;
    var args = arguments;
    // 清除上一次延时器
    if (timer) clearTimeout(timer);
    timer = setTimeout(function () {
      fun.apply(ctx, args);
    }, delay);
  };
  return debounced;
}

注意，fun直接调用 方法里面的this会指向window
而fun.apply()的第一个参数 可以 指定这个方法里的 this是谁

main.js 主要代码

/**
 * 防抖 防止重复点击
 * 传参：v-debounceClick="() =>{handleFun(arg)}"
 * 不传参:v-debounceClick="handleFun"
 * delayTime:延迟的时间,只执行最后一次
 */
Vue.directive('debounceClick', {
  bind(el, binding, vnode, oldvnode) {},
  inserted: function (el, binding) {
    let delayTime = el.getAttribute('delay-time') || 1500
    el.onclick = Debounce(function () {
      binding.value()
    }, delayTime)
  },
})

调用

<el-button v-debounceClick="debounce">防抖</el-button>

debounce() {
      console.log(111);
    }