常见需求:
- 订单列表,快速切换导航栏倒计时倒数异常
通常实现:
(1)只是局部实现倒计时,不将倒计时进行页面全局处理存入data中只是在倒计时结束清空倒计时,问题在快速切换导航条的时候倒计时会表现异常
(2)像网上大部分做法将倒计时通过setData存入数据中,然后在页面卸载的时候清除.这里会有一个问题就是在列表数据中处理的倒计时,如果直接setData存入,然后通过clearInterval(this.data.xxx)在页面卸载的时候进行清除,常常在这种时候,倒计时是清除不了的,尝试过很多次,在原本的定时器中依然会有打印输出
真正解决问题:在列表输出的倒计时,快速切换导航条的时候解决倒计时异常问题,通过数组
以下代码为部分重要代码
data: { timerArr:[],//存储倒计时 },// 获取订单信息 getOrderList: function (){ const me = this // 清除当前timerArr所有元素的倒计时 me.data.timerArr.forEach(function(item,index){ clearInterval(item); }) // 请求数据 app.xAjax({ callBack: function (res) { const orderList = res.data.data; me.setData({ orderList: orderList }) // 遍历输出倒计时 orderList.forEach(function(item, index){ // 倒计时timer var timer = setInterval(function(){ if (countDown0){ if (countDown60){ var countDownStr = Math.floor(countDown / 60) + '分' + (countDown % 60) + '秒' } else { var countDownStr =countDown + '秒' } countDown--; item.countDownStr = '支付倒计时：' + countDownStr; } else { item.countDownStr = ''; // 倒计时结束清除倒计时 clearInterval(timer); } },1000) var arr = me.data.timerArr arr.push(timer) // 将未清除的倒计时存入arr me.setData({// 存储timerArr timerArr:arr }) } } }) }, }) }// 点击切换导航条的时候 bindChangeList(e){ const me = this // 清空倒计时 me.data.timerArr.forEach(function (item, index) { clearInterval(item); }) me.setData({//timerArr设置为空数组 timerArr:[] }) }, //取消订单 cancelOrder(options) { let me = this; me.setData({ isAlertHIdden: false, alertText: '确认取消此订单？', alertType: 'cancel', orderId: options.currentTarget.dataset.orderid, status: options.currentTarget.dataset.status }) //清除定时器 me.data.timerArr.forEach(function (item, index) { clearInterval(item); }) },订单列表倒计时通常需要清除定时器的地方:切换导航条,取消订单,数据请求之前
