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. 微信小程序第一步

    微信小程序开发文档https://developers.weixin.qq.com/miniprogram/dev/#小程序简介

  2. Jenkins配置代码化

    目录 一.简介 二.init.groovy 脚本命令行调试 一.简介 Jenkins用久了,会有一种莫名的紧张感.因为没人清楚Jenkins都配置了什么,以至于没人敢动它. 但凡使用界面进行配置的都会 ...

  3. Identity Server 4 从入门到落地(十二)—— 使用Nginx集成认证服务

    前面的部分: Identity Server 4 从入门到落地(一)-- 从IdentityServer4.Admin开始 Identity Server 4 从入门到落地(二)-- 理解授权码模式 ...

  4. EmmyLua 注解功能

    前言 网上配置 EmmyLua 的方法很多,此处就不做赘述(因此前提是你已经安装配置完EmmyLua) 本文仅是对 EmmyLua插件 内 注解功能 用法的代码演示.因为网上大部分EmmyLua配置教 ...

  5. 02-多任务-thread

    多任务-Thread 一.理解并行与并发 并行:cpu数多于任务数 例如: 一共有三个任务,分别是:QQ.微信.陌陌:一共有四个CPU,每个任务占据一个CPU. 并发:CPU数少于任务数 例如: 一共 ...

  6. 转:addChildViewController实现网易新闻首页切换

    本来只是打算介绍一下addChildViewController这个方法的,正好今天朋友去换工作面试问到网易新闻标签栏效果的实现,就结合它,用个小Demo实例介绍一下:(具体解释都写在了Demo里面的 ...

  7. <转>单机版搭建Hadoop环境

    安装过程: 一.安装Linux操作系统 二.在Ubuntu下创建hadoop用户组和用户 三.在Ubuntu下安装JDK 四.修改机器名 五.安装ssh服务 六.建立ssh无密码登录本机 七.安装ha ...

  8. BUUCFT pwn asis2016_b00ks

    看师傅们wp的时候,我才知道这个道题是wiki上面的例题.我看了一些师傅的wp,发现大家都是一种做法,都是通过mmap堆地址,来找libc基地址的.而我试了一下fastbisn attack,发现也可 ...

  9. CF1177A Digits Sequence (Easy Edition) 题解

    Content 一个序列由从 \(1\) 开始的数字不断在末端拼接,就像这样:\(12345678910111213141516...\).现在,给定一个数字 \(k\),请输出这个序列的第 \(k\ ...

  10. 使用ANTLR解析CSV和JSON

    再续 ANTLR专题 ,有了前面的基础,下面开始用ANTLR写一些有趣且实用的程序. CSV和JSON这两种数据格式对软件开发人员来说最熟悉不过了,一般读写CSV或JSON格式的数据都会借助现成的.比 ...