vue 多个正计时setInterval同时运行 互不影响

已于 2022-07-14 19:23:12 修改
阅读量1.6k 收藏 3
点赞数
文章标签： html vue 前端 vue.js html5
于 2022-07-04 19:17:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44997474/article/details/125606781
版权
本文介绍如何在Vue中处理后端返回的多条数据，为每条数据的洽谈开始时间设置独立的计时器，避免计时混乱。通过使用计算属性和三元运算符，确保每个计时器互不干扰，实现精确的倒计时功能。
摘要由CSDN通过智能技术生成

需求：后端返回多条数据，给一个洽谈开始时间，分别计时。
难点：多处调用定时器进行计时 会互相影响 出现混乱。
设计图：
在这里插入图片描述

代码实现
在这里插入图片描述
在这里插入图片描述
重点就是 利用计算属性 其中计算因素变化 就会重新计算的特点，收到后台循环的开始时间，就倒计时每秒获取当前时间，然后每秒都要重新计算

把定时器从getReduce函数中摘出来，这样多个计时器不会互相影响
在这里插入图片描述
实现效果：
在这里插入图片描述

<di
最低0.47元/天 解锁文章
黄哈哈_123
关注
vue 页面多个倒计时
weixin_64064327的博客
07-20 1130
vue 页面多个倒计时
vue页面使用多个定时器
jililin123的博客
07-14 1702
vue页面使用多个定时器
vue手写计时器（正计时，倒计时）
最新发布
code_gs的博客
06-19 201
【代码】vue手写计时器（正计时，倒计时）
setInterval函数内的变量都是局部变量，多个setInterval执行时，局部变量值不影响
曾子墨
03-29 3937
setInterval函数内的变量都是局部变量，多个setInterval执行时，局部变量值不影响，以下为利用activex获取摘要的测试代码： 并且每个setInterval的值也不同，可以利用eval创建不同的变量值(i1  i2  i3... ...) function getsum(){ var file1="C:/test_data/test/[www.66e.cc]泰j
当需要给程序添加多个定时器时，如何保证定时器不会累加且相互不影响
klbb625的博客
12-07 1331
需要添加一个告警功能，当该节点故障时需要闪烁告警，所以每次判定有故障时就会执行节点告警函数并添加定时器。开始的时候每次执行后如果有新的数据产生就会再次执行一次定时器，这样一个节点可能有多个定时器产生，闪烁的时间也会累加，频率变高。 为了解决这个问题，使用了以下方法： var timerDS = new Object(); var timenum=0; //查找节点并告警 function nodeAlarm(keys,array){ timenum=keys; {if $Req
多个setInterval 冲突问题
xiaoguaishou21509的博客
10-20 5642
多个setInterval 冲突问题同一个函数段里（例如同一个函数）需要先后运行两个setInterval 的时候会出错。两者几乎同时并行，不知道网页是怎么加载的。。。解决方案：在interval A 结束的时候，在interval A里面调用另外一个interval B例如：var t=setInterval(function A(){ //do something… //add
如何在一个页面使多个setInterval函数正常运行
XYM8xym的专栏
06-02 6008
var firstInterval; var secondInterval; function firstAlert(){ if(firstInterval) clearInterval(firstInterval); //处理所有 ......... firstInterval = setInterval('firstAlert()', 1000*2); } function se
Vue 移动端活动倒计时优化
weixin_44526331的博客
04-28 1299
前言 通常写倒计时效果，用的是 setInterval，但这会引发一些问题，最常见的问题就是定时器不准。 如果只是普通的动画效果，倒也无所谓，但倒计时这种需要精确到毫秒级别的，就不行了，否则活动都结束了，用户的界面上倒计时还在走，但是又参加不了活动，会被投诉的╮(╯▽╰)╭ 一、 知识铺垫 1. setInterval 定时器 先说本文的主角 setInterval，MDN web doc 对其...
vue总结
Lee__603的博客
07-29 508
这种按需动态编译的方式，极大的缩减了编译时间，项目越复杂、模块越多，vite的优势越明显。vite充分利用这一点，将开发环境下的模块文件，就作为浏览器要执行的文件，而不是像webpack那样进行打包合并。原理函数防抖的基本思想是设置一个定时器，在指定时间间隔内运行代码时清楚上一次的定时器，并设置另一个定时器，知道函数请求停止并超过时间间隔才会执行。2.多态父类型的引用指向子类型的对象，不同类型的对象针对相同方法，产生了不同的行为。8.介绍下观察者模式和订阅-发布模式的区别，各自适用于什么场景。...
后端的html内容在vue中解析,基于Vue来解析页面在浏览器中呈现的过程中所涉及到的知识点...
weixin_33308985的博客
06-08 2235
前言此篇文章是基于Vue来分析一下从编辑好代码->打包->将dist文件夹放置到服务器上->访问该网址->页面呈现。此过程所涉及到的知识点，本篇很少涉及到具体的代码，主要是理论上的知识，如有错误，烦请各位在评论区指出。概念Vue-cli(快速建立开发环境的脚手架)webpack(模块打包工具)Vue-loader(将单文件组件.vue解析成JS代码形式)单页面应用与多页面应...
面试分析-HTML-CSS-JS-VUE
m0_50125215的博客
09-11 279
-------------基础-------------- 1、H5新特性： 拖拽(抓取对象以后可以拖到另一个位置) data-属性 语义化标签(header、footer、nav、aside等) 视频音频(video、audio) canvas 本地存储(localStorage、sessionStorage)等 2、C3新特性： 边框圆角 box-sizing rgba颜色 渐变 过渡 动画 2D转换 3D转换 flex布局 字体图标等 3、三种存储方式对比： localStorage：长期存
怎样在一个页面使多个setInterval函数正常执行
weixin_34407348的博客
07-10 1239
var firstInterval; var secondInterval; function firstAlert(){ if(firstInterval) clearInterval(firstInterval);//这个是重点 //处理全部 ......... firstInterval = setInterval('firstAler...
同一页面创建多个定时器
MengHuanLanSe的博客
07-13 1375
在一个网页中同时创建多个定时器实现不同任务的倒计时功能，定时器倒计时时间到达之后需要将定时器清除，否则就会新创建的定时器就会受到干扰，代码如下，
多页面使用同个带定时器的组件，多次切换路由定时器叠加无法彻底消除
qq_45840993的博客
03-27 299
多页面使用同个带定时器的组件，多次切换路由定时器叠加无法彻底消除，定时器无法彻底注销
Vue使用定时器setInterval页面跳转后定时器叠加的问题
shmilyyxj的博客
12-07 1578
Vue使用定时器setInterval页面跳转后定时器叠加
**vue定时器混乱问题**
ZHANGWEI19930118的博客
01-05 1807
在用vue的时候在页面定义了一个定时器，然后切换到别的模块在回来时定时器会刷新多次，并且在切换到别的模块时定时器依然在执行，比较消耗性能。 解决办法通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器。以下是完整代码： const timer = setInterval(() =&amp;gt;{ // 某些定时器操作 ...
Vue 正计时器组件
qiankui的博客
09-26 657
vue正计时组件
原生js setInterval定时器执行时间段内动画相互影响问题的解决：给每个element增加一个属性timerId，保证定时器标志互不干扰
u010234868的专栏
08-18 481
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> #box { width: 100px; height: 100px; background-color: pink; position: relative; /*右移位置改变脱离文档流*/ } .
vue3 使用计时器 setInterval
10-20
在Vue3中，使用计时器setInterval可以通过在组件的methods中定义一个函数，并在该函数中使用setInterval函数来实现。具体步骤如下： 1. 在组件的data选项中定义一个变量，用于存储计时器的ID。 2. 在组件的methods...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值