标签：间隔 需求 项目 export 快速 out default script 内存
方案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或者提交表单，所有的接口请求都具备了你需要的能力。
标签：间隔 需求 项目 export 快速 out default script 内存
原文地址：https://www.cnblogs.com/huxiuxiu/p/13030419.html
