vue 防抖节流器

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

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

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. 最后需要生命周期函数将该函数执行一次