在表格中展示订单的倒计时定时器，用一个定时器显示多个倒计时

问题背景

项目中有个需求是要展示订单列表中待支付的订单显示倒计时，在订单支付后，或者超时后刷新列表，更新状态

解决思路

项目使用的vue框架，就要运用vue的数据驱动试图这一特性，所以我们需要添加一个定时器，在定时器中去改变页面上展示的数组的数据，只要数据变了，页面上的展示就变了，定时器每隔一秒，就会变更一下页面数据，就达到了我们想要的效果

先看下效果

图片中只展示了一条带支付，实际情况中可能有多条待支付，也就是说要展示多个倒计时的显示

实现方式

一、请求接口数据，得到数据后存在一个数组里

getOrderList(){this.curOrderList = res.data  || []
}

二，在mounted里调用定时器，这里注意this.timer是在data中，初始为null

 this.timer = setInterval(this.updateOrderTime, 1000);

三，关键的地方是在this.updateOrderTime 中如何处理时间和数据的展示

updateOrderTime(){this.orderList = [];  //这个数组为页面展示的数组for (let i = 0; i < this.curOrderList.length; i++) {  //this.curOrderList为之前存下来的请求接口的结果let item = this.curOrderList[i];let expiration = item.expireDuration //expireDuration 是后端返回的计算好的一个差值，如果后端不返回差值的话，应返回实时的服务器时间和订单到期时间，前端计算一个差值出来item.expireDuration = --item.expireDuration; //每次调用此方法都要给curOrderList 的过期时间-1，这样每次都是一个新的值，我这里用的是秒，考虑到毫秒的话需要-1000，可能会出现负数的情况let minutes =parseInt((expiration / 60) % 60) > 0 ? parseInt((expiration / 60) % 60) : 0; //这个判断是要处理到期时间为0时的处理let seconds = parseInt(expiration % 60) > 0 ? parseInt(expiration % 60) : 0;let showmin = minutes > 9 ? minutes : "0" + minutes;// 这里是处理个位数时前位补0let showsec = seconds > 9 ? seconds : "0" + seconds;let showTimeStr = `${showmin}分${showsec}秒`;//这个变量会被push进数组中，用于页面展示this.orderList.push({...item,showTimeStr});// 接下来就是判断什么时候去刷新列表，更新数据if (item.payStatus === 1 && item.expireDuration === 0) {this.getOrderList();}}
}

四，剩下的坑

应该发现了我并没有设置clearInterval(this.timer)的操作，原因是页面上只有一个定时器，一旦清除后，所有的待支付状态的倒计时就都被清除了，所以我只判断了一下什么情况下应该重新请求数据,这里有待优化，可以考虑滴多个定时器(但不排除会有性能问题)

在表格中展示订单的倒计时定时器，用一个定时器显示多个倒计时相关推荐

成功解决在excel表格中仅在某列内插入一个空白单元格，使其下部的数据整体下移一格
成功解决在excel表格中仅在某列内插入一个空白单元格,使其下部的数据整体下移一格目录解决问题解决方法解决问题在excel表格中仅在某列内插入一个空白单元格,使其下部的数据整体下移一格解决 ...
layui数据表格中展示图片及图片预览
在项目中遇到数据表格中放入图片同时可以点击放大预览.预览方式我才用的是layer方式.代码如下: layui.use('table', function(){var table = layui.tab ...
xlsx表格怎么做汇总统计_excel不同表格中的数据该怎么汇总到一个表格?
在做报表过程中,有时候会遇到同一个工作簿含有多张工作表问题,比如有80张工作表,要对它进行汇总和统计,需要引用每张工作表的数据.如果逐一进行复制粘贴,那是不可能的,时间不允许,怎么办呢? 1.需要解决 ...
speedoffice表格中怎么删除重复数据只保留一个
工作中,在录入数据时,会出现录入重复的情况,如何找出重复的数据尤为重要.今天一起来学习一下excel怎么删除重复项只保留一个吧 1.首先选中数据区域,单击"数据"选项卡下方&quo ...
php网页多个倒计时,怎么实现一个页面有多个倒计时同时进行
后台返回时间,一个页面中有多个表格每个表格中有一行用来显示后台给的时间,比如说后台给一号表格10分钟的倒计时时间,给2号表格15分钟的倒计时时间,那我要怎么做才能使得这两个倒计时都能进行??我自己模拟 ...
layui数据表格中加入二维码
最近在做一个后端项目时,需要在表格中展示二维码,但是在layui表格渲染时无法获取元素id,下面就将我出现的问题记录下,并提供解决方案供大家查看. jq插件qrcode引入和下载 qrcode其实是通 ...
批量将磁盘上所有文件的路径地址、文件名、扩展名和文件夹名整理到 Excel 表格中
概要:对于经常整理文件的小伙伴来讲,需要批量的使用到所有文件的文件的路径地址.文件名还有扩展名,如果有一种方法能够批量的将所有的文件的路径地址.文件的扩展名,还有所在的文件夹的名称能够自动的整理到Ex ...
Excel表格中第一个输入的零不显示怎么办？
Excel表格是办公的人经常要用到的软件,经常用它来统计和记录各种数据,但是有时候表格中第一个数字是零的时候,经常第一个零输入时不显示的,这个情况我们怎么解决呢?这里小编跟大家讲一下希望能帮助大家. ...
sql将表格中的一列放到另一表格
利用SQL语句实现将一个表格中的一列放入另一个表格的一列,其中包括将两列内容进行合并并放进另一表格的操作. NSERT INTO sys_dept_copy1 ( dept_id,parent_id, ...