vue中setInterval定时器带来的坑

最新推荐文章于 2024-06-17 13:19:12 发布
最新推荐文章于 2024-06-17 13:19:12 发布
阅读量420 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_35523558/article/details/131537493
版权

背景：最近要做一个大屏页面，需要根据用户配置，定时刷新页面（1s、5s等等）；

第一版：

 发现问题：定时器并没有起作用，规定时间内并没有自动刷新；

第二版：

 定时刷新问题解决了，但是还有一个问题：初始化页面的时候没有调用定时器里的方法；

第三版：

 把定时器里的方法拿出来单独执行一次，完美解决；

呆瓜666
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
setInterval计时器不准的问题解决方法
09-04
在js中如果打算使用setInterval进行倒数,计时等功能，往往是不准确的，针对这个问题，本文有个不错的解决方案
vue setInterval 定时器失效的解决方式
11-19
3. **性能优化**：避免在定时器中执行复杂的计算或DOM操作，这可能导致性能下降。如果可能，尽量将这些操作拆分为异步任务。 4. **Vue的生命周期**：理解Vue的生命周期是正确处理定时器的关键。对于组件复用场景，...
uniapp中vue2 setInterval调用函数
weixin_56709740的博客
05-08 276
这样调用函数会出现问题，当你将一个函数传递给。上下文会丢失，会出现报错。这样就可以定时调用函数。
Vue 使用setInterval定时器导致前端页面卡死(解决方法)
最新发布
蓝胖子的博客
06-17 403
Vue 使用setInterval定时器导致前端页面卡死(解决方法)
vue中使用定时器setTimeout、setInterval的一些坑
jiandan1127的博客
05-10 6264
1、在vue中，有两套定时器，一套是浏览器API，window对象上的；另一套就是vue/nodejs封装的，需要引入 (之前一直不知道,一直清不掉计时器,坑惨了) import { setInterval, clearInterval } from 'timers' 如果只引入setInterval ,而没有引入 clearInterval 是清不掉计时器的... 最新的vue-cli...
**vue定时器混乱问题**
ZHANGWEI19930118的博客
01-05 1797
在用vue的时候在页面定义了一个定时器，然后切换到别的模块在回来时定时器会刷新多次，并且在切换到别的模块时定时器依然在执行，比较消耗性能。 解决办法通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。以下是完整代码： const timer = setInterval(() =>{ // 某些定时器操作 ...
使用vue的v-model数据绑定之setinterval（）改变数据后不更新视图
zhangqling的博客
06-13 4388
造成这一现象的原因是由于this指向在setInterval间歇调用时发生了变化，注意v-model绑定数据是字符串值，如果要使用数值要进行相应的处理，先使用parseInt()等进行数据类型转换，由于定时时候this指向改变了，不再指向实例。所以在进入定时前进行保存。就可以正常工作了。 new Vue({ el:"#app", data(){ return{ msg:0...
发现问题：edge浏览器的效率模式会导致setTimeout/setInterval变慢
Jay的博客
07-29 631
当edge浏览器启用效率模式后，setTimeout/setInterval运行一段时间后，执行间隔会变慢。
Vue清除定时器setInterval优化方案分享
11-20
在Vue.js应用中，合理管理和清除定时器是优化性能的关键步骤。定时器，如`setInterval`，常常用于实现周期性的任务，但如果不正确地处理，可能会导致内存泄漏，影响应用的性能。本文将探讨两种清除定时器的方案，并...
VUE3+typescript项目之setInterval的坑
weixin_36991257的博客
04-25 3847
## VUE3+typescript项目之setInterval的坑 在做VUE3+typescrpt 项目中，使用setInteval 时的返回值报错问题。 setInterval 的返回值需要定义一个变量来接收，因为typescript是强类型语言。如果直接定义接收类型是number 会报错。 const state = reactive<{ countDown: NodeJS.Timer | null; [key: string]: any; ..
vue(3) 出现了不能读的属性定义的报错但可以渲染如何解决
wangxuanyang_zer的博客
02-08 380
Vue(3).出现了不能读的属性定义的报错。(Cannot read properties of undefined)
vue下，setInterval会影响swiper
Vintage
12-18 961
在做项目中，由于使用了setInterval 函数来进行倒计时，导致vue-awsome-swiper（version: 3.1.3）组件出现了异常。具体异常如下图所示：  在.vue文件中，我倒计时的计时器没有拆分成组件，直接在当前页面进行倒计时相关逻辑操作，直接导致swiper异常，影响到了swiper组件，具体原因尚不清楚。 我自己的解决办法是，直接把倒计时拆分成一个组件，并引用...
vue中定时器实时更新时间，页面加载慢
huai42717的博客
04-28 722
【代码】vue中定时器实时更新时间，页面加载慢。
vue使用setInterval做loading加载延时并及时清除计时
lee_amazing的博客
10-21 1584
延迟5s加载并及时清除计时，只需要吧clearInterval内嵌在setInterval中即可。 var loadingTime = setInterval(() => { this.loading = false clearInterval(loadingTime) }, 5000)
setInterval存在的问题
程序员小曲的博客
03-30 1522
1.setInterval机制： 延时一段时间后，将任务push到任务队列中排队执行； 在每次把任务 push 到任务队列前，都要进行一下判断(看上次的任务是否仍在队列中，如果有则不添加，没有则添加)。 基于该原理，会导致两个问题： 前一任务结束到当前任务开始的时间间隔与设置的delay值不符。 可能出现某些任务被跳过的情况 （1）任务添加的时间间隔误差较大的情况 setInterval(foo, delay) //当foo执行消耗800ms，delay为1000ms时，前一个任务执行结束到后一个任
距离某一时刻 过去的时间
这是个问题
05-27 487
var date1=new Date(‘2018-05-26 08:30:00'); //开始时间 var date2=new Date(); //结束时间 var date3 = date2 - date1; //计算相差小时数 var leave1=date3%(24*3600*1000); //计算天数后剩余的毫秒数 var...
js 解决页面切换时，定时器setInterval会变得很慢，有时候不执行的问题
menghuannvxia的专栏
12-28 6861
通过浏览器窗口焦点事件，清掉定时器 window.onfocus=function(){ timer=setInterval(autoRun,1000); } window.onblur=function(){ clearInterval(timer); }
（九）vue定时setInterval与延迟setTimeout
w_t_y_y的博客
04-07 4347
定时函数setInterval，销毁定时clearTimeout。 如页面没隔10s从后台获取下当前时间 <template> <div>时间{{timeStr}}</div> </template> <script> import { getTime } from "@/api/test"; export default { ...
小记VUE下setTimeOut和setInterval遇到的问题
热门推荐
zcy_csdn123的博客
12-01 1万+
相信大家对着两个函数都陌生，就是一个定时器，setTimeOut只执行一次，而setInterval会重复执行 需要注意的是：在setInterval不用的时候一定要用clearSetInterval关闭定时器。说一下最近开发中遇到的问题，我是用vue开发的，顺便记录这个错误。 我需要轮询接口，所以使用setInterval。// 我是想没2秒执行一次myFunc这个函数。 setInterva
页面刷新时setInterval定时器为什么会停止
07-14
页面刷新时，`setInterval` 定时器会停止，是因为页面刷新会导致 JavaScript 代码重新加载和执行，这包括定时器的清除和重新设置。页面刷新后，之前设置的 `setInterval` 定时器会被销毁，因此定时器停止运行。 如果希望在页面刷新后继续执行定时任务，可以考虑使用 `localStorage` 或 `sessionStorage` 来保存定时器的状态，然后在页面刷新后恢复定时器。另外，也可以考虑使用 `Web Worker` 来在后台运行定时任务，页面刷新不会影响 `Web Worker` 的运行。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值