如何在Flask/Jinja2循环中复用JavaScript实现多独立倒计时

你的代码只有第一个条目生效是四个问题叠加导致的：

• 存在大量语法错误：setInterval/setTimeout括号未闭合、时间格式化调用写法错误、if(mins === )判断值为空、箭头函数语法残缺，脚本运行到错误位置就会中断，后续条目逻辑根本不会执行
• 变量全局污染：循环内每次都用var声明同名全局变量，后面的脚本执行会覆盖前面的DOM引用、定时器ID，最终只有第一个/最后一个元素能被正确操作
• 时间计算逻辑错误：moment的diff方法调用方式完全写错，算出来的剩余时间本身就不对
• 执行效率极低：把整块脚本放在模板循环里重复渲染，N个待办项就会输出N份重复的JS代码，很容易出现作用域冲突

不要在模板循环里内嵌重复脚本，把倒计时逻辑封装成可复用函数，页面加载完成后批量初始化所有待办项的倒计时即可。
首先调整模板部分，只渲染DOM结构，把倒计时需要的到期时间存在DOM的自定义属性上，不再给每个条目拼独立脚本：

<!-- 待办列表渲染区域 -->
{% for todo in todo_list %}
<div id="segment/{{todo.id}}">
  <!-- 给倒计时容器加统一标识类，到期时间存在data-eta属性上，方便JS读取 -->
  <div class="todo-countdown" id="diff-{{todo.id}}" data-eta="{{todo.eta}}"></div>
</div>
{% endfor %}

<!-- 脚本只需要在页面底部放一次，全局复用 -->
<script>
// 封装通用倒计时初始化方法，传入倒计时容器DOM即可启动独立计时
function startTodoCountdown(el) {
  // 读取对应条目的到期时间
  const endTime = moment.utc(el.dataset.eta, "YYYY-MM-DD HH:mm:ss");
  // 定时器ID直接存在DOM元素属性上，完全避免变量冲突
  el.timerId = setInterval(() => {
    const currentTime = moment.utc();
    const remainTime = endTime.diff(currentTime);
    // 剩余时间为0时标记过期，清除定时器
    if (remainTime <= 0) {
      el.textContent = "Expired";
      clearInterval(el.timerId);
      return;
    }
    // 格式化剩余时间为 分:秒 格式
    el.textContent = moment.utc(remainTime).format("mm:ss");
  }, 1000);
}

// 页面DOM加载完成后，批量初始化所有待办的倒计时
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.todo-countdown').forEach(countdownEl => {
    startTodoCountdown(countdownEl);
  });
});
</script>

• 逻辑完全复用：不管有多少个待办项，只需要加载一次JS代码，不会出现重复脚本导致的冲突
• 计时独立互不干扰：每个定时器的引用绑定在对应DOM元素上，增删任意待办项都不会影响其他条目的倒计时运行
• 时间计算准确：每次刷新都实时计算当前时间和到期时间的差值，不会因为页面后台挂起、定时器延迟出现时间漂移
• 扩展方便：后续如果要动态新增待办项，只需要在新的DOM元素渲染完成后，单独调用startTodoCountdown(新元素)就能启动对应的倒计时，不需要额外改逻辑

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