window onresize事件注意一下效率问题

admin6年前程序心得1508

今天在写 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); // 通过有名函数 解除事件订阅
	    }

注意点:

  1. 添加延时器 目的在于onresize 的过程中,只会执行最后一个延时器的代码,即代码只会执行一次

  2. 这样做到好处,可以高效率,毕竟dom 重排代价很高的。

  3. 这里还在 组件销毁的时候去除全局 订阅的事件(这都是细节的问题)


分享到:

相关文章

element table 表格添加行,删除行记录

  <el-table             &n...

lnmp 安装mongodb以及 mongodb扩展

lnmp 安装mongodb以及 mongodb扩展

笔者环境:lnmp 一键安装包:centos7 +php5.6+mysql 5.6 附件:mongo-php-driver-legacy-master.zipgit clone h...

php 多进程处理任务脚本

$count = $this->objBlbServer->getCntByConds(['id >0']); //开启四个进程 $...

js中splice()的强大(插入、删除或替换数组的元素)

处理数组的方法很多,javascript splice()算是最强大的了,它可以用于插入、删除或替换数组的元素。下面来一一介绍! 处理数组的方法很多,javascript splice()算...

如何 clone git 项目到一个非空目录

1. 进入非空目录,假设是 /workdir/proj12. git clone --no-checkout https://git.oschina.net/NextApp/platform.git...

css做屏幕适配

CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS...

发表评论    

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。