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. 【JAVA今法修真】 第三章 关系非关系 redis法器

    您好,我是南橘,万法仙门的掌门,刚刚从九州世界穿越到地球,因为时空乱流的影响导致我的法力全失,现在不得不通过这个平台向广大修真天才们借去力量.你们的每一个点赞,每一个关注都是让我回到九州世界的助力,兄 ...

  2. 20个ios登陆界面

    原文:http://favbulous.com/post/1001/24-unique-ios-login-screen-showcase Eeve Evernote Food Recood Hips ...

  3. mapbox获取各种经纬度

    点击地图即可获取经纬度,也可以手动输入经纬度来换算 在线查看运行效果 实现方法 mapbox中通过地图点击事件来获取到坐标,然后转换为其他的坐标系并输出在屏幕上即可 获取坐标 方法很简单,给地图添加一 ...

  4. CF135A Replacement 题解

    Content 有 \(n\) 个数 \(a_1,a_2,a_3,...,a_n\),试用 \(1\) ~ \(10^9\) 之间的数(除了本身)代替其中的一个数,使得这 \(n\) 个数的总和最小, ...

  5. CF935B Fafa and the Gates 题解

    Content 一个动点 \(F\) 一开始在平面直角坐标系上原点的位置,随后它会移动 \(n\) 次,每次只能向上走或者向右走 \(1\) 个单位,求经过直线 \(y=x\) 的次数. 数据范围:\ ...

  6. Python 代码设计模式

    责任链模式 (场景:OA系统,项目审批...) 使多个对象都有机会处理请求,从而避免请求的发送者和接收者之间的耦合关系.将这些对象连成一条链,并沿着这条链传递该请求,直到有一个对象处理它为止. 适用性 ...

  7. E. Congruence Equation

    E. Congruence Equation 思路: 中国剩余定理 \(a^n(modp) = a^{nmod(p-1)}(modp)\),那么枚举在\([0,n-2]\)枚举指数 求\(a^i\)关 ...

  8. 【LeetCode】227. Basic Calculator II 解题报告(Python)

    [LeetCode]227. Basic Calculator II 解题报告(Python) 标签(空格分隔): LeetCode 作者: 负雪明烛 id: fuxuemingzhu 个人博客: h ...

  9. computer(hdu2196)

    Computer Time Limit: 1000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others)Total Su ...

  10. D. Chloe and pleasant prizes

    D. Chloe and pleasant prizes time limit per test 2 seconds memory limit per test 256 megabytes input ...