vue中使用window.resize并去抖动优化
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并去抖动优化的更多相关文章
- vue中给window添加滚动监听无效的解决方案
原文链接: 点我 页面中有这么一个需求,当页面滚动到一定高度之后,页面中的某些元素进行吸顶,固定到顶部位置,或者是滚动到一定程度进行更新数据的操作.我相信不少网友查阅过类似的资料,网友给出的解决方案, ...
- vue中使用window.open会在url前自动添加本地服务器的地址bug修复
不能写成www.baidu.com 需要写成https://www.baidu.com
- Vue中router路由异步加载组件-优化性能
何时使用异步加载组件 当首页app.js文件太大时,可以拆分组件异步加载,如果app.js文件很小时,不建议使用异步加载组件,因为异步加载组件时每次都要发送一个HTTP请求,这样的代价远比首页一次性加 ...
- vue 中使用 echarts 自适应问题
echarts 自带的自适应方法 resize() 具体用法: let xxEcharts = this.$echarts.init(document.getElementById('xxx')) ...
- vue中使用chart.js
1,安装chart.js和vue-chart.js npm install chart.js --save npm install vue-chart.js --save 2,独立文件,方便修改 封装 ...
- vue中监听window.resize的变化
我只想说每个人遇到的bug真的不能一概而论,解决办法也会有不同.在vue中使用echarts的时候,会想要实现window.resize窗体变化大小的时候让图形大小跟着变化.实现的过程中各种bug,也 ...
- JQuery 在$(window).load() 事件中 不运行 $(window).resize()
本文转载至: http://stackoverflow.com/questions/2597152/jquery-window-resize-doesnt-work-on-load 原文标题 :J ...
- 解决Javascript中$(window).resize()多次执行(转)
https://www.cnblogs.com/shuilangyizu/p/6816756.html 有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个 ...
- 解决Javascript中$(window).resize()多次执行
有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个时候,我们需要在窗口拖动的时候去执行代码.但是有些时候,执行的操作比较复杂,我们只希望在窗口拖动完毕之后 ...
随机推荐
- 二级C复习
二级C语言 队列 计算队列中元素个数 种 : rear > front ,直接减 第二种: rear < front 上面两种综合一起,求元素个数公式 :(r - f + maxsize) ...
- Python pyecharts绘制柱状图
本文摘抄至https://05x-docs.pyecharts.org/#/zh-cn/charts_base?id=bar%ef%bc%88%e6%9f%b1%e7%8a%b6%e5%9b%be%e ...
- Python 如何管理类的创建行为
问题 如果我们要给类加上一个属性,只需在定义的时候加上属性就可以了: class Animal: can_fly = True 如果这样的类有很多,我们可以定义一个父类,让其它类继承他就可以了: cl ...
- 删除空行(嵌套)(Power Query 之 M 语言)
数据源: "姓名""基数""个人比例""个人缴纳""公司比例""公司缴纳"&qu ...
- C语言程序设计:二分查找(折半查找)
目录 C语言程序设计:二分查找(折半查找) 1.什么是二分查找 2.二分查找的优点 3.二分查找的缺点 4.二分查找原理 5.源代码实现 6.后话 C语言程序设计:二分查找(折半查找) 1.什么是二分 ...
- 这样学习ZooKeeper离大厂所需技能要求还远吗
概述 定义 Apache ZooKeeper是一种用于构建分布式应用的高性能.高度可靠.开源的分布式协调服务,提供如配置信息维护.命名.分布式同步.组服务等功能,可以实现如分布式共识.组管理.领导选举 ...
- CF977C Less or Equal 题解
Content 给定一个 \(n\) 个数的数列 \(a_1,a_2,a_3,...,a_n\) 和一个数 \(k\),试找出这样的一个数 \(x\),使得数列中有 \(k\) 个数小于等于 \(x\ ...
- 洛谷八月月赛 II T2 题解
Content 现有 \(T\) 次询问. 每次询问给定一个长度为 \(n\) 的 01 串,记为 \(A\).回答应是一个字符串 \(B\),满足: \(B\) 是长度为 \(m\) 的 01 串. ...
- CF248A Cupboards 题解
Content 在一个走廊上有 \(2n\) 扇门,排成两列分居左右.有个人很无聊,随意地开关了一些门,使得这些门看起来十分乱.现在请开关一些门,使得这些门恢复原来整齐的状态(要么都开.要么都关.要么 ...
- 基于nginx的rtmp直播服务器(nginx-rtmp-module实现)
首先,在搭建服务之前先了解下目前主流的几个直播协议: 1.RTMP: 实时消息传输协议,Real Time Messaging Protocol,是 Adobe Systems 公司为 Flash 播 ...