比如掃碼槍，掃碼的時候，如果輸入框監聽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);
  }
}