問(wèn)題背景

項(xiàng)目中有個(gè)需求是要展示訂單列表中待支付的訂單顯示倒計(jì)時(shí)，在訂單支付后，或者 超時(shí)后刷新列表，更新?tīng)顟B(tài)

解決思路

項(xiàng)目使用的vue框架，就要運(yùn)用vue的數(shù)據(jù)驅(qū)動(dòng)試圖這一特性，所以我們需要添加一個(gè)定時(shí)器，在定時(shí)器中去改變頁(yè)面上展示的數(shù)組的數(shù)據(jù)，只要數(shù)據(jù)變了，頁(yè)面上的展示就變了，定時(shí)器每隔一秒，就會(huì)變更一下頁(yè)面數(shù)據(jù)，就達(dá)到了我們想要的效果

先看下效果

圖片中只展示了一條帶支付，實(shí)際情況中可能有多條待支付，也就是說(shuō)要展示多個(gè)倒計(jì)時(shí)的顯示

實(shí)現(xiàn)方式

一、請(qǐng)求接口數(shù)據(jù)，得到數(shù)據(jù)后存在一個(gè)數(shù)組里

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

二，在mounted里調(diào)用定時(shí)器，這里注意this.timer是在data中，初始為null

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

三，關(guān)鍵的地方是在this.updateOrderTime 中如何處理時(shí)間和數(shù)據(jù)的展示

updateOrderTime(){this.orderList = []; //這個(gè)數(shù)組為頁(yè)面展示的數(shù)組for (let i = 0; i < this.curOrderList.length; i++) { //this.curOrderList為之前存下來(lái)的請(qǐng)求接口的結(jié)果let item = this.curOrderList[i];let expiration = item.expireDuration //expireDuration 是后端返回的計(jì)算好的一個(gè)差值，如果后端不返回差值的話，應(yīng)返回實(shí)時(shí)的服務(wù)器時(shí)間和訂單到期時(shí)間，前端計(jì)算一個(gè)差值出來(lái)item.expireDuration = --item.expireDuration; //每次調(diào)用此方法都要給curOrderList 的過(guò)期時(shí)間-1，這樣每次都是一個(gè)新的值，我這里用的是秒，考慮到毫秒的話需要-1000，可能會(huì)出現(xiàn)負(fù)數(shù)的情況let minutes =parseInt((expiration / 60) % 60) > 0 ? parseInt((expiration / 60) % 60) : 0; //這個(gè)判斷是要處理到期時(shí)間為0時(shí)的處理let seconds = parseInt(expiration % 60) > 0 ? parseInt(expiration % 60) : 0;let showmin = minutes > 9 ? minutes : "0" + minutes;// 這里是處理個(gè)位數(shù)時(shí)前位補(bǔ)0let showsec = seconds > 9 ? seconds : "0" + seconds;let showTimeStr = `${showmin}分${showsec}秒`;//這個(gè)變量會(huì)被push進(jìn)數(shù)組中，用于頁(yè)面展示this.orderList.push({...item,showTimeStr});// 接下來(lái)就是判斷什么時(shí)候去刷新列表，更新數(shù)據(jù)if (item.payStatus === 1 && item.expireDuration === 0) {this.getOrderList();}} }

四，剩下的坑

應(yīng)該發(fā)現(xiàn)了我并沒(méi)有設(shè)置clearInterval(this.timer)的操作 ，原因是頁(yè)面上只有一個(gè)定時(shí)器，一旦清除后，所有的待支付狀態(tài)的倒計(jì)時(shí)就都被清除了，所以我只判斷了一下什么情況下應(yīng)該重新請(qǐng)求數(shù)據(jù),這里有待優(yōu)化，可以考慮滴多個(gè)定時(shí)器(但不排除會(huì)有性能問(wèn)題)

總結(jié)

以上是生活随笔為你收集整理的在表格中展示订单的倒计时定时器，用一个定时器显示多个倒计时的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。