节流器:在一定时间内频繁的触发函数只会执行一次
应用场景:我这里有一个图表需要在窗口改变大小的时候重绘图表的大小,但是窗口改变大小的事件过于频繁,需要增加一个节流器来进行处理,最终需要实现图表的自适应。
methods:{
onresize(){
let throttle = true
window.onresize = function(){ //节流防止函数触发频繁
if (throttle) {
throttle = false
setTimeout(() => {
console.log('触发');
throttle = true
}, 300);
}else{
return
}
}
}
},
mounted(){
this.onresize()
}
原理:
- 声明一个变量(throttle)并赋值为true
- window.onresize监听浏览器窗口大小的变化
- 判断变量(throttle)是否为true
- 进入之后将变量(throttle)赋值为false,防止同一时间再次进入
- 增加定时器setTimeout,把时间设置为300毫秒(具体时间按照场景可调整)
- 进入定时器之后在将变量(throttle)赋值为true,此时才可以再次进入
- 最后需要生命周期函数将该函数执行一次