2021-07-08

小程序批量倒计时

循环倒计时数组

有一些商城项目需要秒杀活动的展示这个时候会有倒计时数组出现，倒计时一般我就是使用setInterval，使用这个一定要注意清除倒计时。

大致思路就是先从后台请求到商品列表，这里后台是把倒计时和商品一起传给我的。我从这个商品里面找到倒计时这一项单独拉出来新建倒计时数组，然后和商品一起循环。

// 这里是我请求商品列表的代码片段
  getData() {
    var that = this;
    // 在请求之前先清除当前timerArr所有元素的倒计时
    that.data.timerArr.forEach(function (item, index) {
      clearInterval(item);
    })
    that.setData({ //timerArr设置为空数组
      timerArr: []
    })
    // 商品列表请求
    app.globalData.api.getGoodsList('/api/index/indexGoodsList', {
      user_id: wx.getStorageSync('user_id'),
      page: this.data.page,
      pagesize: this.data.pagesize
    }).then(res => {
      // console.log(res)
      if (res.data.code == '1') {
        var listx = res.data.data.goodsList
        if (that.data.page > 1) {
          if (listx.length == 0) {
            // wx.showToast({
            //   title: "没有更多的数据了...",
            //   icon: 'none',
            // })
            that.setData({
              nomoredata: true
            })
          } else {
            that.setData({
              active: that.data.active.concat(listx)
            })
          }
        } else {
          that.setData({
            active: listx
          })
        }
        // 遍历 倒计时
        that.allActive()
      }
    }, err => {
      console.log(err)
    })
  },

下面就是遍历倒计时的代码块

// 遍历所有 活动 开启倒计时
  allActive() {
    var that = this
    var active = that.data.active
    var daotimes = [];
    for (var i = 0; i < active.length; i++) {
      var obj = {
        countDownDay: '00',
        countDownHour: '00',
        countDownMinute: '00',
        countDownSecond: '00',
        djsTime: 'x'
      }
      daotimes.push(obj)
    }
    that.setData({
      daotimes: daotimes,
    })
    for (var i = 0; i < active.length; i++) {
      clearInterval(i);
      that.daoTime(i, active[i].endtime)
    }
  },
  //----------------下面就是循环倒计时的函数------------------
    // 倒计时
  daoTime(index, endTime) {
    var that = this
    var daotimes = that.data.daotimes
    //倒计时效果 开始
    // console.log(Date.parse(new Date()) / 1000)
    var totalSecond = endTime - Date.parse(new Date()) / 1000;
    // console.log(totalSecond)
    var interval = setInterval(function () {
      // 秒数
      var second = totalSecond;

      // console.log(second);
      // 天数
      var day = Math.floor(second / 3600 / 24);
      var dayStr = day.toString();
      if (dayStr.length == 1) dayStr = '0' + dayStr;
      // 小时位
      var hr = Math.floor((second - day * 3600 * 24) / 3600);
      var hrStr = hr.toString();
      if (hrStr.length == 1) hrStr = '0' + hrStr;

      // 分钟位
      var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
      var minStr = min.toString();
      if (minStr.length == 1) minStr = '0' + minStr;
      // 秒位
      var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
      var secStr = sec.toString();
      if (secStr.length == 1) secStr = '0' + secStr;

      daotimes[index].countDownDay = dayStr
      daotimes[index].countDownHour = hrStr
      daotimes[index].countDownMinute = minStr
      daotimes[index].countDownSecond = secStr
      daotimes[index].djsTime = totalSecond;

      that.setData({
        daotimes: daotimes
      })

      totalSecond--;
      if (totalSecond < 0) {
        clearInterval(interval);
        // wx.showToast({
        //   title: '活动已结束',
        //   icon: 'none',
        // });
        daotimes[index].countDownDay = '00';
        daotimes[index].countDownHour = '00';
        daotimes[index].countDownMinute = '00';
        daotimes[index].countDownSecond = '00';
        daotimes[index].djsTime = 0;
        that.setData({
          daotimes: daotimes
        });
      }
    }.bind(this), 1000);
    // 倒计时结束
    var arr = that.data.timerArr
    arr.push(interval) // 将未清除的倒计时存入arr
    that.setData({ // 存储timerArr
      timerArr: arr
    })
    // console.log(this.data.daotimes)
  },

注：最后离开这个页面也要记得清楚倒计时

onUnload: function () {
 var that = this;
 // 清除当前timerArr所有元素的倒计时
 that.data.timerArr.forEach(function (item, index) {
   clearInterval(item);
 })
 that.setData({ //timerArr设置为空数组
   timerArr: []
 })
},