vue 中防抖

比如扫码枪，扫码的时候，如果输入框监听input事件，就有可能会多次触发回调。
支付按钮，如果点击过快，也可能多次触发支付回调。
这就需要前端做防抖处理了。

vue执行防抖函数

在vue中，大家写函数，一般是这样的。如下：

methods: {
  handleScanDataChange() {
    _debounce(function() {
        console.log(this.searchValue);
    })();
  }
}

但是防抖函数也这样写，是错误的。

正确写法：

  handleScanDataChange: _debounce(function() {
    console.log(this.searchValue);
  }, 300),

给按钮添加自定义指令防抖

//log为传入的函数名
<button v-btnDebounce="test">节流按钮</button>

directives: {
  //防抖函数指令
  btnDebounce: {
    inserted: function(el, binding) {
      let timer;
      el.addEventListener("click", () => {
        if (timer) {
          clearTimeout(timer);
        }
        timer = setTimeout(() => {
          // 关键点: vue的自定义指令传递的参数binding如果是一个函数，则通过      
          // binding.value()来执行，通过上述示例，还可以传递比如事件，绑定对象之类的
          binding.value();
        }, 1000);
      });
    }
  }
},
methods: {
  test() {
    console.log(123);
  }
}