window onresize事件注意一下效率问题
最近好久没有发帖了,今天在写 vue 项目的时候, echarts 图标需要随着 窗口变化适配,在使用 onresize 的时候,延时器代码不会写了,这里再记录下代码如下mounted() {// 添加 echarts 窗口变化 事件// side-menu 变化 ,直接通知吧(这个影响不大,有需要再添加吧)window.addEventLis...
·
最近好久没有发帖了,今天在写 vue 项目的时候, echarts 图标需要随着 窗口变化适配,在使用 onresize 的时候,延时器代码不会写了,这里再记录下
代码如下
mounted() {
// 添加 echarts 窗口变化 事件
// side-menu 变化 ,直接通知吧(这个影响不大,有需要再添加吧)
window.addEventListener('resize', this.echartsResize);
},
methods: {
echartsResize() {
if(this.timer) clearTimeout(this.timer);
this.timer = setTimeout(() => { // 只执行最后一个定时器的 结果
this.$refs[this.activeName].echartsResize();
}, 300); // 推迟 300 ms 在执行resize 效果
}
},
beforeDestroy() {
window.removeEventListener("resize", this.echartsResize); // 通过有名函数 解除事件订阅
}
注意点:
- 添加延时器 目的在于onresize 的过程中,只会执行最后一个延时器的代码,即代码只会执行一次
- 这样做到好处,可以高效率,毕竟dom 重排代价很高的。
- 这里还在 组件销毁的时候去除全局 订阅的事件(这都是细节的问题)
更多推荐
已为社区贡献5条内容
所有评论(0)