先上效果图
研究心路
最开始是想给每个订单都添加自己的定时器倒计时,成功了,达到了效果,但继续测试时发现超过二十条数据就会卡死,甚至白屏闪退,小程序承受不住这么多的定时器。后来有小伙伴给我提建议,让我把定时器设置在列表上,每一秒就重新加载一次列表。性能上就好了很多,不卡了,数据加载的多也没问题了。
关键代码
// 遍历数组
forOrderList() {
this.setData({
inter: setInterval(() => {
let orderList = [];
let flag = false; // 是否有小于等于0的数据
let statusFlag = false; // 是否有待付款的商品
for (let i = 0; i < this.data.orderList.length; i++) {
let orderItem = {
id: this.data.orderList[i].id,
type: this.data.orderList[i].type,
number: this.data.orderList[i].number,
status: this.data.orderList[i].status,
goods: this.data.orderList[i].goods,
num: this.data.orderList[i].num,
money: this.data.orderList[i].money,
update_time: this.data.orderList[i].update_time,
time30: --this.data.orderList[i].time30,
payText: `去支付(${getMS(this.data.orderList[i].time30)})`,
express_id: this.data.orderList[i].express_id
}
if (this.data.orderList[i].status === 1) {
statusFlag = true;
if (this.data.orderList[i].time30 <= 0) {
this.setOrderExpire(this.data.orderList[i].id);
flag = true;
return;
} else {
orderItem.payText = orderItem.time30 <= 0 ? '去支付(00:00)' : `去支付(${getMS(orderItem.time30)})`;
}
}
orderList.push(orderItem);
}
if (!statusFlag) {
clearInterval(this.data.inter);
}
if (flag) {
return;
}
this.setData({
orderList
})
}, 1000)
})
},
tips
记得及时清理定时器!