当前位置:首页 > 程序心得 > 正文内容

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

admin6年前 (2019-06-11)程序心得1517

今天在写 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. 这里还在 组件销毁的时候去除全局 订阅的事件(这都是细节的问题)


分享到:

扫描二维码推送至手机访问。

版权声明:本文由云河空间发布,如需转载请注明出处。

本文链接:https://yuyunhe.cn/index.php/post/293.html

分享给朋友:

“window onresize事件注意一下效率问题” 的相关文章

月薪3万的程序员都避开了哪些坑

月薪3万的程序员都避开了哪些坑

程序员薪水有高有低,有的人一个月可能拿30K、50K,有的人可能只有2K、3K。同样有五年工作经验的程序员,可能一个人每月拿20K,一个拿5K。是什么因素导致了这种差异?我特意总结了容易导致薪水低的九大行为表现,避开这些大坑,你就离高薪不远了。习惯即刻回报他不懂得只有春天播种,秋天才会有收获。刚刚付...

SVN Skipped 'xxx' -- Node remains in conflict 错误的解决办法

svn提交发现错误#cd /home/svn/app/# svn upUpdating '.':Skipped 'xxx' -- Node remains in conflictAt revision 1054.Summary of conflicts: ...

Thinkphp3.2.x 多图上传几个注意点

1、<form enctype="multipart/form-data">2、<form enctype="multipart/form-data">3、<input type="file...

css做屏幕适配

CSS判断不同分辨率浏览器(显示屏幕)显示不同宽度布局CSS3技术支持IE6到IE8。将用到css3 @media样式进行判断,但IE9以下版本不支持CSS3技术,这里DIVCSS5给大家介绍通过JS实现低版本的浏览器也支持CSS3实现实用布局CSS DIV网页布局中当分辨率小于等于1024px(像...

RSA密钥的生成与配置(支付宝公私密钥可用)

RSA密钥的生成与配置(支付宝公私密钥可用)

RSA密钥的生成与配置openssl下载地址http://dldx.csdn.net/fd.php?i=20313208579480&s=ac2e809e168f7d5b8bf1515d3d6b1aa4,或者官方下载通过openssl工具生成RSA的公钥和私钥(opnssl工具可在互联网中下...

ios5的safari浏览器的电话号码识别功能的禁用

更详细的apple官方文档: https://developer.apple.com/library/safari/#featuredarticles/iPhoneURLScheme_Reference/Articles/PhoneLinks.html在编写 HTML 时,有一个 meta...

发表评论

访客

看不清,换一张

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