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主从 部署和配置
目录 一.主从简介 主从介绍 主从原理 二.主从部署 环境介绍 主从配置 临时主从 三.主从测试 一.主从简介 主从介绍 Redis都是主节点.每个从节点只能有一个主节点,而主节点可以同时具有多个从节 ...
- Linux Ubuntu18.04 安装配置 clash
我最近一段时间在搭建用于构建 Docker 镜像的开发测试环境,这个环境是一台运行于 Windows 笔记本上的虚拟机,其操作系统为 Ubuntu 18.04 .构建场景中经常要去 Github 获取 ...
- mrctf2020_shellcode_revenge(可见符shellcode)!!!!
第一次碰到这种题目,需要用可见符shellcode来做 题目我就不放了,我认为网上大佬会比我说的更加详细 [原创]纯字母shellcode揭秘-软件逆向-看雪论坛-安全社区|安全招聘|bbs.pedi ...
- Python利用ctypes实现C库函数调用
0X00 ctypes 是强大的,使用它我们就能够调 用动态链接库中函数,同时创建各种复杂的 C 数据类型和底层操作函数.使得python也具备了底层内存操作的能力,再配合python本身强大的表达能 ...
- Kali渗透安卓手机
kali渗透安卓手机 1.生成木马文件 msfvenom -p android/meterpreter/reverse_tcp LHOST=ip LPORT=端口 R > test.apk 在终 ...
- Android4.4开机动画播放视频
Android4.4系统启动时,播放自定义bootanimation.zip动画时,由于分辨率为1280x720,bootanimation.zip包也很大,播放太卡,所以将开机动画修改为播放视频.如 ...
- 【LeetCode】364. Nested List Weight Sum II 解题报告 (C++)
作者: 负雪明烛 id: fuxuemingzhu 个人博客:http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcode ...
- 【剑指Offer】二进制中1的个数 解题报告(Python)
题目地址:https://www.nowcoder.com/ta/coding-interviews 题目描述 输入一个整数,输出该数二进制表示中1的个数.其中负数用补码表示. 解题方法 这个题如果使 ...
- 【LeetCode】700. Search in a Binary Search Tree 解题报告(Python)
作者: 负雪明烛 id: fuxuemingzhu 个人博客: http://fuxuemingzhu.cn/ 目录 题目描述 题目大意 解题方法 递归 日期 题目地址:https://leetcod ...
- Another kind of Fibonacci(hdu3306)
Another kind of Fibonacci Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Jav ...