小程序踩坑---倒计时踩坑(倒计时快速切换显示异常)

常见需求:

1. 订单列表,快速切换导航栏倒计时倒数异常
   

通常实现:
(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);
	    })
  },

订单列表倒计时通常需要清除定时器的地方:切换导航条,取消订单,数据请求之前