在專案開發過程中，讓人抓狂之一的問題就是一個點選事件，當快速點選的時候，它會重複傳送多個請求。這是不允許出現的。

但是怎麼解決這個問題呢？

一般處理方法，就是點選的時候，立刻將該按鈕disabled，這樣就可以避免重複傳送請求了。但是我發現這個有一個弊端，那就是：

如果，該事件有許多的驗證，比如電話、郵箱格式是否正確呀，必填的是否填了呀等等。一旦你點選就把按鈕disabled了，發現該填的沒填，回去填完後發現按鈕不能點了？那是因為剛才點選的時候被你disabled了，所以還得在驗證的方法中取消按鈕的disable。就造成了你點選的時候，第一步，將按鈕disable了，然後一步一步向下驗證，如果驗證出錯，得取消disable，當所有驗證通過了，在請求的回撥函式中，成功了也要取消disable，失敗了也要取消disable，因為失敗了使用者多半還會繼續點兩次，不取消disable會讓使用者發現怎麼點不了了。這就造成了全篇都是按鈕disable的設定與取消。一旦有修改，很難維護的。

在vue中，有一個lodash,我們只需引入就可以使用了。比如以下程式碼：

<template>
  <div>
    <div class="bindBtn">
      <button class="bindDataBtn" @click="postAction">提交</button>
    </div>
  </div>
</template>
<script>
import _ from 'lodash'
export default {
  data() {
    return {
    
    }
  },
  mounted() {
  
  },
  methods: {
    sendAjax(){
      /*這裡是請求的介面、引數以及回撥函式等*/
    },
    postAction(){
      this.doPostAction()
    }
  },
  created(){
    this.doPostAction = _.debounce(this.sendAjax,500);
  }
}
</script>
 

我們首先將傳送請求的ajax方法寫在一個函式裡面，在這裡就是sendAjax函式，其次，我們引入lodash，然後將sendAjax這個函式用一個方法自定義一下，在這裡就是doPostAction，其中_是我們引入的lodash，_.debounce是一個限制操作頻率的函式，裡面的是500是毫秒單位。

當執行點選事件的時候，也就是postAction函式，我們只需要呼叫doPostAction這個函式就可以了，而那個500的功能就是你在這個時間段裡，無論執行了多少次這個點選事件，它都只會執行一次。

這樣就少了我們通篇disable來disable去

最後附上官網例子：點選前往