首页 > 其他 > 详细

防抖实例

时间:2021-03-07 15:25:34      阅读:20      评论:0      收藏:0      [点我收藏+]

说明

第一次用到防抖,有点小激动。

在写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)
},

关于防抖函数封装的网上有很多,我就不班门弄斧了...

防抖实例

原文:https://www.cnblogs.com/sanhuamao/p/14494227.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!