vue |防抖例子

说明

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

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

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