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()多次执行
有些时候,我们需要在浏览器窗口发生变化的时候,动态的执行一些操作,比如做自适应页面时的适配.这个时候,我们需要在窗口拖动的时候去执行代码.但是有些时候,执行的操作比较复杂,我们只希望在窗口拖动完毕之后 ...
随机推荐
- Redis cluster 集群报错合集
目录 一.连接集群操作报错(error)MOVED 二.集群关闭后重启报错 三.Redis (error) NOAUTH Authentication required 四.Redis集群使用中突然挂 ...
- thinkphp or查询
$map['source'] = array(array('eq',0),array('eq',1), 'or'); $this->model->where($map)
- Latex-安装_第一天
LaTex安装 Windows 小知识: \(Tex\)来源technology,希腊词根是\(tex\),Latex应该读成"拉泰赫". https://miktex.org/ ...
- [V&N2020 公开赛]babybabypwn
写在开头,感谢"影二つ"师傅的指点. 题目的做法思路网上一搜一大把,这篇博客主要记录一下这道题用pwntools写srop的时候,为什么需要省略前面8个字节. 在看题目之前,先来学 ...
- cmcc_simplerop
这是一道系统调用+rop的题. 先来就检查一下保护. 32位程序,只开启了堆栈不可执行.ida看一下伪代码. 代码也很简洁,就是直接让你溢出.这里ida反汇编显示的v4具体ebp的距离是0x14,再加 ...
- Table.Sort排序…Sort(Power Query 之 M 语言)
数据源: 任意查询表 目标: 对其中一列数据进行排序 操作过程: 选取对象>[主页]>[排序]>[升序排序] 选取对象>[主页]>[排序]>[降序排序] M公式: ...
- C#汉字转汉语拼音
一.使用PinYinConverterCore获取汉语拼音 最新在做一个搜索组件,需要使用汉语拼音的首字母查询出符合条件的物品名称,由于汉字存在多音字,所以自己写查询组件不太现实,因此,我们使用微软提 ...
- LuoguP6553 Strings of Monody 题解
Content 给定一个长度为 \(n\) 的字符串 \(s\)(仅包含 \(1,4,5\) 三种字符,\(n\) 在本题中无需输入),有 \(m\) 个操作,每次操作给定两个整数 \(l,r\),再 ...
- CF158A Next Round 题解
Content 有 \(n\) 个人参加比赛,第 \(i\) 名在第一轮的分数是 \(a_i\)(保证 \(a_i\geqslant a_{i+1}\))已知下一轮预计能进 \(k\) 人,当然如果有 ...
- CF1141C Polycarp Restores Permutation 题解
Content 给定一个长度为 \(n-1\) 的序列 \(q\),问你是否能找到一个 \(1\sim n\) 的排列 \(p\),使得 \(\forall i\in[1,n)\),\(q_i=p_{ ...