在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>

本文介绍了如何在Vue应用中使用防抖(debounce)函数来优化点击事件处理,通过限制连续触发间隔,避免频繁提交数据导致后端压力增大。
1783

被折叠的 条评论
为什么被折叠?



