Bootstrap模态框关闭后setInterval定时器无法正常工作如何解决

问题根因 #

你遇到的问题核心有两个：

1. 你当前的setInterval是页面加载后直接全局启动，并非模态框打开时才启动。首次打开模态框时，timerid元素已经渲染完成，所以计时器可以正常写入数值。但模态框关闭后，内部DOM会被移除，clock函数执行时获取timerid元素会得到null，调用innerHTML会抛出JS错误，导致整个计时器逻辑终止运行。
2. 模态框再次打开时，你没有重新启动计时器的逻辑，已经崩溃的计时任务不会自动恢复，自然就没有数值显示。

修复方案 #

调整逻辑，将计时器的启动绑定到模态框打开事件，关闭模态框时主动销毁计时器并重置计时数值即可：

// 全局声明计时器、分、秒变量
var timer;
var sec = 0;
var min = 0;

// 模态框完全打开后启动计时器，把下方#你的模态框ID替换成你实际的模态框元素ID
$('#你的模态框ID').on('shown.bs.modal', function () {
  // 启动前先清空之前可能存在的计时器，避免重复启动多个计时任务
  clearInterval(timer);
  // 重置计时数值，保证每次打开弹窗都从0开始计时
  sec = 0;
  min = 0;
  // 启动新的计时器
  timer = setInterval(clock, 1000);
})

// 模态框关闭后销毁计时器，释放资源
$('#你的模态框ID').on('hidden.bs.modal', function () {
  clearInterval(timer);
})

// 原计时逻辑优化
function clock() {
  sec += 1;
  if (sec == 60) {
    min += 1;
    sec = 0;
  }
  // 增加元素存在判断，避免极端场景下报错
  const timerEl = document.getElementById("timerid");
  if(timerEl) {
    // 增加补0逻辑，避免出现0:1这类格式问题，统一显示为00:01
    timerEl.innerHTML = min.toString().padStart(2, '0') + ":" + sec.toString().padStart(2, '0');
  }
}

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