this.clientWidth = document.documentElement.clientWidth
window.onresize = () => {
this.clientWidth = document.documentElement.clientWidth
}

上述代码可以实现效果,但是执行的太过于频繁,会造成一定的性能损耗,对此进行了防抖优化。

优化后代码如下:

this.clientWidth = document.documentElement.clientWidth
let resizeTag = true
window.onresize = () => {
if (resizeTag) {
this.clientWidth = document.documentElement.clientWidth
resizeTag = false
setTimeout(() => {
resizeTag = true
}, 100)
}
}

参考:https://blog.csdn.net/aliguagua/article/details/78633309

vue中使用window.resize并去抖动优化的更多相关文章

  1. vue中给window添加滚动监听无效的解决方案

    原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...

  2. vue中使用window.open会在url前自动添加本地服务器的地址bug修复

    不能写成www.baidu.com 需要写成https://www.baidu.com

  3. Vue中router路由异步加载组件-优化性能

    何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加 ...

  4. vue 中使用 echarts 自适应问题

    echarts 自带的自适应方法  resize() 具体用法: let xxEcharts = this.$echarts.init(document.getElementById('xxx')) ...

  5. vue中使用chart.js

    1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改 封装 ...

  6. vue中监听window.resize的变化

    我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...

  7. JQuery 在$(window).load() 事件中 不运行 $(window).resize()

    本文转载至: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load 原文标题   :J ...

  8. 解决Javascript中$(window).resize()多次执行(转)

    https://www.cnblogs.com/shuilangyizu/p/6816756.html 有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个 ...

  9. 解决Javascript中$(window).resize()多次执行

    有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个时候,我们需要在窗口拖动的时候去执行代码.但是有些时候,执行的操作比较复杂,我们只希望在窗口拖动完毕之后 ...

随机推荐

  1. Linux提取命令grep 有这一篇就够了

    grep作为linux中使用频率非常高的一个命令,和cut命令一样都是管道命令中的一员.并且其功能也是对一行数据进行分析,从分析的数据中取出我们想要的数据.也就是相当于一个检索的功能.当然了,grep ...

  2. Mysql资料 查询SQL执行顺序

    目录 一.Mysql数据库查询Sql的执行顺序是什么? 二.具体顺序 一.Mysql数据库查询Sql的执行顺序是什么? (9)SELECT (10) DISTINCT column, (6)AGG_F ...

  3. Wireshark(五):TCP窗口与拥塞处理

    原文出处: EMC中文支持论坛 TCP通过滑动窗口机制检测丢包,并在丢包发生时调整数据传输速率.滑动窗口机制利用数据接收端的接收窗口来控制数据流. 接收窗口值由数据接收端指定,以字节数形式存储于TCP ...

  4. [BUUCTF]REVERSE——[GUET-CTF2019]re

    [GUET-CTF2019]re 附件 步骤: 查壳儿,upx壳,64位程序 upx脱壳儿,然后扔进64位ida,通过检索字符串,找到有关flag的信息定位到关键函数 让我们输入flag,然后满足su ...

  5. redis hash操作 list列表操作

    HSET key 子key 子value 192.168.11.5:6379> HSET stu1 name 'zhangmingda'(integer) 1192.168.11.5:6379& ...

  6. CentOS系统 python3+python2 & Ipython安装

    https://www.cnblogs.com/albertrui/p/8093384.html 一.安装依赖环境 输入命令: yum -y install zlib-devel bzip2-deve ...

  7. ThreadLocal的正确使用与原理

    ThreadLocal是什么 ThreadLocal是线程Thread中属性threadLocals即ThreadLocal.ThreadLocalMap的管理者,ThreadLocal用于给每个线程 ...

  8. IDEA中springboot项目添加yml格式配置文件

    1.先创建application.properties 文件,在resources文件夹,右键 new -> Resource Bundle  如下图所示,填写名称 2.生成如下图所示文件 3. ...

  9. JAVA获取当前日期时间所在周的周一和周日日期

    /** * 获取当前时间所在周的周一和周日的日期时间 * @return */ public static Map<String,String> getWeekDate() { Map&l ...

  10. Qt之使用qss设置Qwidget背景色无效解决

    如题 解决方案 添加头文件 #include <QStyleOption> 重写函数paintEvent 内容如下 void statistics_assistant::paintEven ...