vue中阻止快速点击两次提交按钮调两次接口

Posted huxiuxiu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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或者提交表单,所有的接口请求都具备了你需要的能力。

以上是关于vue中阻止快速点击两次提交按钮调两次接口的主要内容,如果未能解决你的问题,请参考以下文章

Vue js如何防止按钮连续点击两次[重复]

点击按钮一次发送三个ajax请求怎么实现

为啥两次点击按钮时这个表单没有提交两次?

jquery绑定click事件出现点击一次执行两次的问题

如何在提交按钮上多次单击时仅在数据库中插入一条记录

强制点击提交按钮两次