vue使用定时器更新时间造成的页面卡顿

已于 2022-03-30 10:45:50 修改
阅读量4.2k 收藏 17
点赞数 5
文章标签： vue js javascript html5 vue.js
于 2022-03-30 10:44:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_32058147/article/details/123840125
版权

最近做一个大屏可视化项目，用定时器加延时器写时间同步更新功能，刚开始以为很简单就完事了，后面客户反应时间一场页面就卡顿，最后排查原因，原来是计时器长时间调用引发内存泄漏，

后面优化了一下，果断没问题

错误写法

 先是定义一个getData函数 ， 用来获取当前时分秒，日期，

( moment 函数我就不说了吧 ， 一款日期格式化插件 ， npm 可以下载 )

再到mounted 定义一个计时器，计时器里调用getData函数 实时更新时间，虽然需求是达到了，但是长时间不关闭看看，页面肯定卡到爆

正确写法

 在getData函数里面创建个延时器 ， 延时1秒后再回调getData函数  从而达到一个递归，而不会导致内存泄漏和溢出

注意 组件销毁后一定要清除延时器

new一个obj
关注
  • 5
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue路由切换页面不更新问题解决方案
10-15
主要介绍了Vue路由切换页面不更新问题解决方案,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
Vue清除定时器setInterval优化方案分享
11-20
两种方案清除定时器，开发者经常使用方案1，建议使用方案2 方案1 首先我在data函数里面进行定义定时器名称： data() { return { timer: null // 定时器名称 } }, 然后这样使用定时器： this.timer = (() => { ...
vue,定时器刷新导致卡死
2301_81079328的博客
01-19 678
项目中明明设置了定时请求，发现没有清除定时器队列，多个定时器发请求导致页面崩溃。
Vue项目 在chrome页面崩溃:喔唷 崩溃了（总结）
热门推荐
IT博客技术分享
12-05 1万+
情况一、vue项目在谷歌浏览器上出现崩溃 一、问题描述： 最近vue项目开发时，在chrome浏览器页面过一段时间一直提示：页面崩溃:喔唷 崩溃了 项目开发的时候，测试同事反馈页面会出现“喔唷 崩溃了”，打开控制台进行相同操作后发现控制台会频繁出现一个警告： Forced reflow while executing JavaScript took <N>ms 二、问题...
2024年vue数据太多导致页面卡顿解决办法_vue下拉框数据过多卡顿的原因，花三分钟看完这篇文章你就懂了
最新发布
2401_84411522的博客
05-04 688
从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】个人将这段时间所学的知识，分为三个阶段：第一阶段：HTML&CSS&JavaScript基础第二阶段:移动端开发技术第三阶段:前端常用框架推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；
VUE倒计时组件，解决setInterval （）引起页面卡顿问题
m0_53718249的博客
07-15 3219
VUE倒计时组件，解决setInterval （）引起页面卡顿问题
vue中定时器实时更新时间，页面加载慢
huai42717的博客
04-28 708
【代码】vue中定时器实时更新时间，页面加载慢。
setinterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页
H-L的博客
10-30 6324
setinterval和settimeout的区别 在vue.js项目中，经常需要对数据实时更新——每隔xx秒需要刷新一次接口——即需要用到定时器相关原理 我们先看一看2种常用定时器： 1 2 setInterval(function(){}, milliseconds)——会不停的调用函数 setTimeout(function(){}, milliseconds)——只执行函数一次 乍看之下，setInterval会符合我们的业务需求，然而
vue组件里定时器销毁问题
追梦猪的博客
08-06 1304
我在a页面写一个定时，让他每秒钟打印一个1，然后跳转到b页面，此时可以看到，定时器依然在执行。这样是非常消耗性能的。如下图所示：解决方法1：首先我在data函数里面进行定义定时器名称：data(){ return{...
解决：setInterVal长时间运行卡顿，采用setTimeout代替setInterval.
鹿歪歪酱
11-16 3336
仅记录 原作者：Hot．Adair 原地址：https://blog.csdn.net/qq_45503103/article/details/110943706 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> .
【VUE】监控大屏运行时间长后卡顿，如何解决
Y_hhya的博客
10-25 996
项目中遇到一个问题，监控大屏共五页，前后翻页依据路由跳转，其中有两页每分钟刷新5万+数据并在地图上打点，运行时间长了会出现卡顿，甚至卡死情况。
vue setInterval 定时器失效的解决方式
11-19
我们在使用vue的脚手架去搭建开发环境的时候，在A页面写入一个定时器去定时请求一个接口，但是我们去B页面，C页面的时候都会有这个接口定时请求的现象，那么怎样处理呢？ 第一步： 首先我在data函数里面进行定义...
浏览器优化策略对setTimeout和setInterval的影响
weixin_42900858的博客
07-27 509
浏览器优化策略对setTimeout和setInterval的影响
定时器——每一秒调一次接口，请求次数太多怎样让它不那么卡
Velocityy的博客
01-02 2978
如题， 其实应该把 setInterval 和 setTimeout 结合起来使用，如下面例子： created: function() { window.setInterval(() => { setTimeout(this.getCurrTime(), 0); }, 1000); } 上面是一个实时时间显示器，每一秒调一次接口，将此刻的时间显示到页面上来...
uniapp vue 界面更新数据内存泄漏问题 OR 解决方案
qq_1126043450的博客
09-08 1253
uniapp 在cpu能力查的情况下卡顿明显，刚开始界面少的时候可能还不是很明显，下次选型要注意这个点；官方解决问题难（考虑到官方也不容易，每天提bug的那么多），不过还是希望对于这种非常严重的问题官方能够重视（毕竟几年前都有人提出这个问题了）；对于其他方案 uniapp 的能力还是很不错的，开发速度也很快，一般的项目都能扛住，但是对于物联网项目来说局限性还是太高了。
vue定时任务引发的问题
weixin_44423757的博客
07-16 695
vue定时任务引发的问题问题原因导致的后果解决方案 问题原因 vue中定义了一个定时任务来定时刷新渲染前台数据 created: function(){ this.intervalRunningTime = setIntval(() => { this.refresh(); //调用刷新接口 },5000) //每隔5秒刷新一次 } }, 由于后台接口请求第三方应用超时，无法及时返回数据，导致前台http请求一直处于pending状态，并且不
京东2017校招前端主观题汇总
Bidding
08-13 1706
1、谈谈优雅降级与渐进增强的区别。 解： 渐进增强：针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。 优雅降级 ：一开始就构建完整的功能，然后再针对低版本浏览器进行兼容。 2、描述cookies，sessionStorage和localStorage的区别。 解： cookies是在浏览器端存储数据，有大小限制，每个
vue定时刷新及清除定时器
qq_43432157的博客
01-27 4782
首先确认< router-view >外层是否有包裹了一层< keep-alive > 如果有包裹： <template> <div> <keep-alive> <router-view /> </keep-alive> </div> </template> 在data中： data () { return { timer: null // 定
vue使用定时器实现计时器
06-08
可以使用Vue的计算属性和定时器来实现计时器。 首先，在Vue的data中定义一个变量来存储计时器的时间，例如： ```javascript data() { return { time: 0 } } ``` 然后，在Vue的methods中定义一个方法来启动计时器，并使用setInterval函数来每隔一秒更新时间： ```javascript methods: { startTimer() { setInterval(() => { this.time++ }, 1000) } } ``` 接下来，在Vue的计算属性中定义一个方法来将时间格式化为分秒形式： ```javascript computed: { formattedTime() { const minutes = Math.floor(this.time / 60) const seconds = this.time % 60 return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}` } } ``` 最后，在Vue的模板中显示计时器的时间： ```html <template> <div> <p>{{ formattedTime }}</p> <button @click="startTimer">Start</button> </div> </template> ``` 这样，当用户点击Start按钮时，计时器就会启动，并且每秒钟更新一次时间，同时将格式化后的时间显示在页面上。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值