微信小程序一个页面设置多个定时器实现倒计时

最近业务上有个需求就是一个车辆管理列表，可以实现对每一辆车实现刷新，刷新的目的在于更新刷新时间，让车辆在首页展示时按刷新时间倒序排列。所以为了增强用户体验，得显示每辆车的刷新倒计时。话不多说，看初期UI设计的图

UI设计图

实现过程并不难，难就难在返回上一页进来后显示倒计时的文字就没有了。后面解决的办法时将点击刷新按钮的当前时间存入缓存中，在重新进入页面时先判断缓存中是否存在此时间。如下图

源码1

当这个问题也解决了，就发现一个很坑的问题，每次上拉刷新或者重新进入页面后，有时候会倒计时结束后又重新倒计时。重新检查了好几遍，没发现逻辑有错误。定时结束后也清除了定时器，效果是下面这样子的：

实现效果图1

当方框内倒计时文字结束到00.00时候。会重新倒计时，而不是我想要的隐藏倒计时文字同时刷新按钮变成绿色可用。

后面解决方案是将定时器的id也存入缓存中，每次执行一个新的定时器，就判断缓存中是否存在此id的定时器，如下图

源码2

以下是倒计时的主要代码

interval(index) {//倒计时

    var that = this

    //先判断缓存中是否存在此定时器，如果存在则清除此定时器。

    //（目的在于当重新进入页面时或者上拉刷新时候，需要重新从后台加载数据，这时候在数据加载过程中会会判断缓存中是否存在车辆的刷新时间数据，如果存在，则调用此倒计时方法，而这时候调用则会出现倒计时结束后会重新倒计时，因为这时候的倒计时已经不是原来那个倒计时方法了。说的可能有点懵逼，，把如下4行去掉测试，你们就明白）

    var interval_id = wx.getStorageSync('interval'+index)

    if (interval_id){

      clearInterval(interval_id)

    }

    var interval = setInterval(function () {

      //将每个定时器的id存入缓存,这么做也是没办法

      wx.setStorageSync('interval' + index, interval)

      let insertTime = 'insertTime[' + index + ']'

      var disabled = 'disabled[' + index + ']'

      //从缓存中读取是否有倒计时数据

      var countDownTime = wx.getStorageSync(insertTime);//时间戳格式

      if (countDownTime){

        var nowTime = Date.parse(new Date());//当前时间戳

        var differ_time = countDownTime - nowTime;//时间差：(10分钟)

        if (differ_time > 0) {

          var differ_minute = Math.floor(differ_time % (3600 * 1e3) / (1000 * 60));

          var s = Math.floor(differ_time % (3600 * 1e3) % (1000 * 60) / 1000)

          if (differ_minute.toString().length < 2) {

            differ_minute = "0" + differ_minute;

          }

          if (s.toString().length < 2) {

            s = "0" + s;

          }

          var str = differ_minute + ':' + s;

          that.setData({

            [insertTime]: str,

            [disabled]: true

          });

        } else {// 当倒计时结束，不再进行倒计时

          console.log("不进行倒计时");

          that.setData({

            [insertTime]: '00:00',

            [disabled]: null

          });

          wx.removeStorageSync(insertTime)

          wx.removeStorageSync('interval' + index)

          clearInterval(interval)

        }

      }else{

        var nowTime = Date.parse(new Date());//当前时间戳

        var countDownTime = nowTime + (600*1000);//时间差：(10分钟)

        wx.setStorageSync(insertTime, countDownTime)

        that.setData({

          [insertTime]: '10:00',

          [disabled]: true

        });

      }

    }, 1000);

  }

---

最终效果展示：由于不能上传视频，所以就将就着看图片把

实现效果图2

实现效果图3

想要完整源码的朋友可以在下方留言哦