常见需求:
- 订单列表,快速切换导航栏倒计时倒数异常
通常实现:
(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 (countDown>0){
if (countDown>60){
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);
})
},
订单列表倒计时通常需要清除定时器的地方:切换导航条,取消订单,数据请求之前