在Vue中使用JavaScript防抖功能
为防止点击事件重复触发增加后端接口压力,所以在方法之前需要用debounce函数嵌套以减少http请求次数
data(){
return{
timer:'',
}
},
methods:{
//防抖代码
debounce(fn,wait){
if (this.timer !=='' ){
clearTimeout(this.timer)
}
this.timer = setTimeout(fn,wait)
}
//点击保存走此方法
async SubmitBtnClick(){
//两个参数(触发的方法,触发时间)
this.debounce(this.submitForm,2000)
}
// 保存方法
async submitForm(){
let res = await kpiAdd()
}
}
<div class="save-btn">
<el-button type="primary" @click="SubmitBtnClick()">提交</el-button>
</div>