标签:多次 次数 加载 接口 调用接口 计算 关于 现在 turn
第一次用到防抖,有点小激动。
在写vue项目,有一个需求:用户更改数量后,由于一些策略原因,我需要调用接口让后台计算后才能获取最终金额,但用户可能短时间内改很多次数量,这样的话多次调用接口就很浪费!这时“防抖”就派上用场了。
在一段时间内如果多次调用同一个函数,只执行最后一次。
data(){
return{
timer:null,//定时器
moneyLoading:false,//增加加载效果
}
}
下面的changeCount
是中间函数,会被多次调用。
//原本:每次触发changeCount都会通过getMoney发送请求
changeCount(){
//...
this.getMoney()
},
//现在:如果在两秒内多次触发changeCount,getMoney只会在最后调用一次
changeCount(){
//...
this.moneyLoading=true//开始加载
clearTimeout(this.timer)//每次调用都要释放上一个定时器
this.timer = window.setTimeout(() => {
this.getMoney()//调用最终的函数
this.moneyLoading=false//结束加载
}, 2000)
},
关于防抖函数封装的网上有很多,我就不班门弄斧了...
标签:多次 次数 加载 接口 调用接口 计算 关于 现在 turn
原文地址:https://www.cnblogs.com/sanhuamao/p/14494227.html