vue中阻止快速點擊兩次提交按鈕調兩次接口

方案1：申明一個變量，點擊時置灰提交按鈕。等接口調用結束放開按鈕，就是你在點擊之后，ajax請求完成之前將那個按鈕禁止點擊

<template>
<div>
    <!-- 其他代碼 -->
    <button v-if="canSave" @click="save">提交</button>
    <button v-else disabled>提交</button>
</div>
</template>
<script>
export default {
    data(){
        return {
            canSave: true,
        }
    },
    methods: {
        save(){
            if(!canSave){
                return;
            }
            this.canSave = false;
            // AJAX 結束后 this.canSave = true;
        },
    }
}
</script>

 

方案2：利用setTimeout，點擊一次時隔兩秒后才能再次點擊

<div id="app">
      <button @click="submit"  :disabled="isDisable">點擊</button>
</div>

data(){
   return{
      isDisable:false
   }
}
 
methods:{
    submit(){
       this.isDisable=true
       setTimeout(()=>{
           this.isDisable=false   //點擊一次時隔兩秒后才能再次點擊
       },2000)
    }
}

方案3：加防抖

我覺得“節流”和“去抖”應該結合在一起：間隔時間段內，只執行一次。

方案4：其實所有的接口請求都有這個需求，因此可以對ajax封裝一個代理層

代理層可以做兩個事情

緩存接口返回數據，可以緩存到sessionstorage,也可以緩存到內存，相同的請求先訪問緩存
給每個請求接口加狀態，未請求、請求中、已完成。未請求時去請求接口，同時把此接口狀態置為請求中；請求中時再請求接口，將回調保存起來，接口數據返回以后，將數據存儲到緩存，一起回調；已完成時請求接口，直接從緩存中讀取數據，不再請求接口
這樣，不光是vue項目，也不光是post或者提交表單，所有的接口請求都具備了你需要的能力。