問題背景

項目中有個需求是要展示訂單列表中待支付的訂單顯示倒計時，在訂單支付后，或者 超時后刷新列表，更新狀態

解決思路

項目使用的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)的操作 ，原因是頁面上只有一個定時器，一旦清除后，所有的待支付狀態的倒計時就都被清除了，所以我只判斷了一下什么情況下應該重新請求數據,這里有待優化，可以考慮滴多個定時器(但不排除會有性能問題)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。