订单列表未支付账单倒计时

灰太狼 2022-11-16 00:59 178阅读 0赞

## 先上效果图 ##

![在这里插入图片描述][20210402161249198.gif]

## 研究心路 ##

最开始是想给每个订单都添加自己的定时器倒计时，成功了，达到了效果，但继续测试时发现超过二十条数据就会卡死，甚至白屏闪退，小程序承受不住这么多的定时器。后来有小伙伴给我提建议，让我把定时器设置在列表上，每一秒就重新加载一次列表。性能上就好了很多，不卡了，数据加载的多也没问题了。

## 关键代码 ##

// 遍历数组
      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 ##

记得及时清理定时器！

[20210402161249198.gif]: /images/20221022/57e33cdbf6524cc2ae1ed4bb67f5d0fa.png