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. Redis主从 部署和配置

    目录 一.主从简介 主从介绍 主从原理 二.主从部署 环境介绍 主从配置 临时主从 三.主从测试 一.主从简介 主从介绍 Redis都是主节点.每个从节点只能有一个主节点,而主节点可以同时具有多个从节 ...

  2. Linux Ubuntu18.04 安装配置 clash

    我最近一段时间在搭建用于构建 Docker 镜像的开发测试环境,这个环境是一台运行于 Windows 笔记本上的虚拟机,其操作系统为 Ubuntu 18.04 .构建场景中经常要去 Github 获取 ...

  3. mrctf2020_shellcode_revenge(可见符shellcode)!!!!

    第一次碰到这种题目,需要用可见符shellcode来做 题目我就不放了,我认为网上大佬会比我说的更加详细 [原创]纯字母shellcode揭秘-软件逆向-看雪论坛-安全社区|安全招聘|bbs.pedi ...

  4. Python利用ctypes实现C库函数调用

    0X00 ctypes 是强大的,使用它我们就能够调 用动态链接库中函数,同时创建各种复杂的 C 数据类型和底层操作函数.使得python也具备了底层内存操作的能力,再配合python本身强大的表达能 ...

  5. Kali渗透安卓手机

    kali渗透安卓手机 1.生成木马文件 msfvenom -p android/meterpreter/reverse_tcp LHOST=ip LPORT=端口 R > test.apk 在终 ...

  6. Android4.4开机动画播放视频

    Android4.4系统启动时,播放自定义bootanimation.zip动画时,由于分辨率为1280x720,bootanimation.zip包也很大,播放太卡,所以将开机动画修改为播放视频.如 ...

  7. 【LeetCode】364. Nested List Weight Sum II 解题报告 (C++)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcode ...

  8. 【剑指Offer】二进制中1的个数 解题报告(Python)

    题目地址:https://www.nowcoder.com/ta/coding-interviews 题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 解题方法 这个题如果使 ...

  9. 【LeetCode】700. Search in a Binary Search Tree 解题报告(Python)

    作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcod ...

  10. Another kind of Fibonacci(hdu3306)

    Another kind of Fibonacci Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Jav ...