1. debounce和throttle是目前用得最廣泛的，具體可見樓上的一堆收藏；
2. 想要確保邏輯上不會(huì)有同時(shí)提交的請(qǐng)求，npm搜“mutex”也有很多；

3. 或者我也寫了一個(gè)簡易版的，用下面的函數(shù)包裹點(diǎn)擊回調(diào)，如果前一次請(qǐng)求尚未結(jié)束，新請(qǐng)求會(huì)和舊請(qǐng)求一起返回。這樣的話回調(diào)要返回Promise

   const debounceAsync = originalFunction => {
     let currentExcution = null;
     const wrappedFunction = async function () {
       // 1. locked => return lock
       if (currentExcution) return currentExcution;
   
       // 2. released => apply
       currentExcution = originalFunction.apply(this, arguments);
       try {
         return await currentExcution;
       }
       finally {
         currentExcution = null;
       }
     };
     return wrappedFunction;
   };

   用法

   const sleep = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms));
   
   const debounceAsync_UNIT_TEST = async () => {
     const goodnight = debounceAsync(sleep);
     for (let i = 0; i < 8; i++) {
       goodnight(5000).then(() => console.log(Date()));
       await sleep(500);
     }
     console.warn('Expected output: 8 identical datetime');
   };

   https://segmentfault.com/a/11...

其實(shí)所有的接口請(qǐng)求都有這個(gè)需求，因此可以對(duì)ajax封裝一個(gè)代理層

代理層可以做兩個(gè)事情

1. 緩存接口返回?cái)?shù)據(jù)，可以緩存到sessionstorage,也可以緩存到內(nèi)存，相同的請(qǐng)求先訪問緩存
2. 給每個(gè)請(qǐng)求接口加狀態(tài)，未請(qǐng)求、請(qǐng)求中、已完成。未請(qǐng)求時(shí)去請(qǐng)求接口，同時(shí)把此接口狀態(tài)置為請(qǐng)求中；請(qǐng)求中時(shí)再請(qǐng)求接口，將回調(diào)保存起來，接口數(shù)據(jù)返回以后，將數(shù)據(jù)存儲(chǔ)到緩存，一起回調(diào)；已完成時(shí)請(qǐng)求接口，直接從緩存中讀取數(shù)據(jù)，不再請(qǐng)求接口

這樣，不光是vue項(xiàng)目，也不光是post或者提交表單，所有的接口請(qǐng)求都具備了你需要的能力。

方案一：申明一個(gè)變量，點(diǎn)擊時(shí)置灰提交按鈕。等接口調(diào)用結(jié)束放開按鈕。

<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 結(jié)束后 this.canSave = true;
        },
    }
}
</script>

方案二：加防抖。放幾個(gè)之前收藏的鏈接：
JavaScript 函數(shù)節(jié)流和函數(shù)去抖應(yīng)用場景辨析
underscore 函數(shù)去抖的實(shí)現(xiàn)
underscore 函數(shù)節(jié)流的實(shí)現(xiàn)

JavaScript專題之跟著underscore學(xué)防抖
JavaScript專題之跟著 underscore 學(xué)節(jié)流

現(xiàn)在比較好的處理就是你在點(diǎn)擊之后，ajax請(qǐng)求完成之前將那個(gè)按鈕禁止點(diǎn)擊。