E企盈营销工具技术服务商 热线:4006-838-530

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

E企盈直播平台营销卖货系统

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

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 小程序踩坑倒计时踩坑(倒计时快速切换显示异常)
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏