DataTable实现倒计时功能报timers未定义的引用错误如何解决？

核心错误原因 #

• timers变量未提前声明，且仅在异步执行的setInterval回调内部赋值。DataTable的render函数是同步执行的，执行到return timers语句时，setInterval的1秒延时回调还未触发，timers变量从未被赋值，自然抛出未定义的引用错误。
• 冗余逻辑错误：render函数是针对每一行的当前列单独执行的，入参timestamp就是当前行对应字段的值，不需要遍历timestamp.length。
• 闭包与作用域问题：countDown未声明变量，且所有行的定时器回调会共用同一个countDown值，就算解决了未定义问题，所有行的倒计时也会显示异常。
• 渲染逻辑错误：render仅负责生成列的初始渲染内容，就算定时器后续更新了timers变量，也不会自动触发表格内容更新，倒计时不会跳动。

修复后的完整实现 #

// 全局存储所有行的定时器，避免内存泄漏
var countdownTimers = [];

var table = $("#myTable").DataTable({
  processing: true,
  serverSide: true,
  ajax: {
    url: "/getOrder",
    dataSrc: "orderStr",
  },
  // 表格重绘前清空所有旧定时器，避免重复添加定时器导致内存泄漏
  preDrawCallback: function() {
    countdownTimers.forEach(timer => clearInterval(timer));
    countdownTimers = [];
  },
  columns: [
    { data: "id" },
    { data: "market" },
    { data: "order_type" },
    { data: "trade_amount" },
    { data: "strike_price" },
    { data: "filled_status" },
    { data: "kof_frame" },
    { data: "time_frame" },
    { data: "expiration_date" },
    { data: "timestamp" },
    {
      data: "timestamp",
      render: function (timestamp, type, row, meta) {
        const second = 1000,
          minute = second * 60,
          hour = minute * 60,
          day = hour * 24;
        const countDown = new Date(timestamp).getTime();
        
        // 计算初始倒计时值
        function getCountdownText() {
          const now = new Date().getTime();
          const distance = countDown - now;
          if (distance <= 0) return "已过期";
          const days = Math.floor(distance / day);
          const hours = Math.floor((distance % day) / hour);
          const minutes = Math.floor((distance % hour) / minute);
          const seconds = Math.floor((distance % minute) / second);
          return days + "d:" + hours + "h:" + minutes + "m:" + seconds + "s";
        }

        // 每秒更新当前行的该列DOM
        const timer = setInterval(() => {
          table.cell(meta.row, meta.col).node().textContent = getCountdownText();
        }, 1000);
        countdownTimers.push(timer);

        // 直接返回初始倒计时值
        return getCountdownText();
      },
    },
  ],
});

额外注意事项 #

• 分页、搜索、排序触发表格重绘时，需要先清空之前的定时器，避免定时器越来越多导致性能问题，代码中已经通过preDrawCallback做了对应处理。
• 所有变量都补充了声明，避免隐式全局变量导致的作用域混乱问题。

内容的提问来源于stack exchange，提问作者Calin89