layui 渲染表格给每一行设置一个倒计时

场景，后台返回的数据有一个时间字段，往后延迟多少分钟要触发某个事件，如超过了时间就显示为0

表格渲染的代码如下，其他参数省略

table.render({
   cols: [[
         {
            		field: 'time',
                    width: 200,
                    title: '倒计时',
                    templet: function (a) {
                     // 根据后端返回的时间在延长 10分钟,计算出还剩下多少秒
                      var t = (a.time+ 60 * 10) - Math.floor(new Date().getTime() / 1000);
                      // 设置每一条数据唯一的key
                      var key = 'key_' + a.status;
                      // 分钟
                      var minute1 = Math.floor(t / 60);
                      // 秒数
                      var second1 = t % 60;
                      if (minute1 < 10) {
                        minute1 = "0" + Math.floor(t / 60);
                      }
                      if (second1 < 10) {
                        second1 = "0" + t % 60;
                      }
                      var time2 = minute1 + ":" + second1;
                      // 这里初始值计算显示的倒计时只是为了 如页面有刷新操作，只是把这个初始值也显示为倒计时
                      var html = `<label id=${key} style="color: red;">${time2}</label>`;
                      if (t <= 0) {
                        return `<label  id=${key}>0</label>`;
                      }
                      addTask(key, function () {
                        t--;
                        var minute = Math.floor(t / 60);
                        var second = t % 60;
                        if (minute < 10) {
                          minute = "0" + Math.floor(t / 60);
                        }
                        if (second < 10) {
                          second = "0" + t % 60;
                        }
                        $('#' + key).text(minute + ":" + second);
                        if (t == 0) {
                          $('#' + key).text("0");
                          delTask(key);
                          // 倒计时到执行的操作
                          ...........
                        }
                      });
                      return html;
                    }
         }
         ]],
    });

外部定时器代码

这里都没有去测试性能的，只是实现的思路，使用时请评估

	  // 该map可以定义在最上面
	  var tasks = new Map();
 	  // 定时计时任务，这里是1秒执行一次
      setInterval(function () {
        for (var key in tasks) {
          tasks[key]();
        }
      }, 1000)
      // 添加定时任务
      function addTask(key, value) {
        if (typeof value === "function") {
          tasks[key] = value;
        }
      }
      // 删除定时任务
      function delTask(task) {
        delete tasks[task];
      }

展示的页面如下

注意，为了防止tasks元素都删除完了抛异常，所以我们把setInterval定时器写在表格渲染时的done里面，写个判断
把上面的setInterval去掉，定义一个变量 var timer = -1;

 		done: function (res, curr, count) {
            if (Object.keys(tasks).length > 0) {
              if (-1 == timer) {
                timer = setInterval(function () {
                  for (var key in tasks) {
                    tasks[key]();
                  }
                }, 1000)
              }
            } else {
              if (-1 != timer) {
                clearInterval(timer);
                timer = -1;
              }
            }
          }

倒计时显示

	  // 倒计时时间格式化【00:00】
	  function timeFormat(times){
	    var minute = Math.floor(times / 60);
	    var second = times % 60;
	    if (minute < 10) {
	      minute = "0" + Math.floor(times / 60);
	    }
	    if (second < 10) {
	      second = "0" + times % 60;
	    }
	    return minute + ":" + second;
	  }
	  
	//根据秒数生成倒计时格式【0天00：00:00】
      function timerFormat(t) {
        var  leftd = Math.floor(t/(3600*24)),  //计算天
                lefth = Math.floor(t/3600%24),  //计算小时数
                leftm = Math.floor(t/60%60),  //计算分钟数
                lefts = Math.floor(t%60);  //计算秒数
        if(lefth<10){
          lefth = "0" + lefth;
        }
        if(leftm<10){
          leftm = "0" + leftm;
        }
        if(lefts<10){
          lefts = "0" + lefts;
        }
        return  leftd + "天" + lefth + ":" + leftm + ":" + lefts
      }