码迷,mamicode.com
首页 > 其他好文 > 详细

防抖实例

时间:2021-03-08 13:50:57      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:多次   次数   加载   接口   调用接口   计算   关于   现在   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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!