vue 防抖节流器

时间:2023-02-10 12:59:42

节流器:在一定时间内频繁的触发函数只会执行一次

应用场景:我这里有一个图表需要在窗口改变大小的时候重绘图表的大小,但是窗口改变大小的事件过于频繁,需要增加一个节流器来进行处理,最终需要实现图表的自适应。

methods:{
  onresize(){
    let throttle = true
    window.onresize = function(){ //节流防止函数触发频繁
      if (throttle) {
        throttle = false
        setTimeout(() => {
          console.log('触发');
          throttle = true
        }, 300);
      }else{
        return
      }
    }
  }
},
mounted(){
  this.onresize()
}

原理:

  1. 声明一个变量(throttle)并赋值为true
  2. window.onresize监听浏览器窗口大小的变化
  3. 判断变量(throttle)是否为true
  4. 进入之后将变量(throttle)赋值为false,防止同一时间再次进入
  5. 增加定时器setTimeout,把时间设置为300毫秒(具体时间按照场景可调整)
  6. 进入定时器之后在将变量(throttle)赋值为true,此时才可以再次进入
  7. 最后需要生命周期函数将该函数执行一次