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. 前端浅谈-协议相关(DNS协议)

    从应用层到实体层的协议太多了,我们并不能一一涉及,目前来说就打算整理可能会与前端相关的协议. 前端面试常会问到一个问题-"从输入一个url到页面渲染经历了哪些过程".这其实是一个相 ...

  2. logcplus(2)

    (一)log4cplus是C++编写的开源的日志系统,功能非常全面,用到自己开发的工程中会比较专业的,:),本文介绍了log4cplus基本概念,以及如何安装,配置.  ### 简介 ### log4 ...

  3. 粒子群优化算法—Matlab

    PSO算法 clc; clear ; close ; %% Problem Definition CostFunction = @(x) sphere(x); % Cost Function nVar ...

  4. CVE 2021-44228 Log4j-2命令执行复现及分析

    12月11日:Apache Log4j2官方发布了2.15.0 版本,以修复CVE-2021-44228.虽然 2.15.0 版本解决了Message Lookups功能和JNDI 访问方式的问题,但 ...

  5. UVA11951 Area 题解

    Content 小 S 想买下一块地.他所在的城市可以看成一个 \(n\times m\) 的网格,要购买所处在 \((i,j)\) 的网格需要缴税 \(c_{i,j}\) 元,如果一块地里面有多个网 ...

  6. CF1437A Marketing Scheme 题解

    Content 有 \(t\) 组询问,每组询问给定两个整数 \(l,r\),问是否存在一个 \(a\),使得 \(\forall x\in[l,r]\),都有 \(x\mod a\geqslant\ ...

  7. 面试官问我TCP三次握手和四次挥手,我真的是

    候选者:面试官你好,请问面试可以开始了吗 面试官:嗯,开始吧 面试官:今天来聊聊TCP吧,TCP的各个状态还有印象吗? 候选者:还有些许印象的,要不我就来简单说下TCP的三次握手和四次挥手的流程吧 候 ...

  8. JAVA将一个pdf按页码拆分成多个pdf

    引入maven <dependency> <groupId>com.itextpdf</groupId> <artifactId>itextpdf< ...

  9. windows10源码编译llvm

    准备 cmake, 我目前使用的版本是3.18 llvm 源码, 我下载的是 11.0 我已经具备Vs2015和Vs2017的开发环境. debug模式编译需要较多内存和较多硬盘存储空间. (debu ...

  10. nim_duilib(9)之RichEdit

    introduction 更多控件用法,请参考 here 和 源码. 本文的代码基于这里 RichEdit的更多用法,请参考源码中RichEdit.h提供的函数,RichEdit控件,可以定制为多种多 ...