JS实现答题APP倒计时跳转功能时计时器无法停止问题求助

问题根因 #

• 属性名大小写错误：初始化倒计时数值的代码中，innerHTML被误写为innerHTMl（末尾L为小写），会导致初始赋值不生效。
• 触发逻辑未放入定时器回调：倒计时结束的跳转判断没有放在setInterval的执行逻辑中，定时器每秒仅执行数值递减操作，永远无法触发跳转。
• 取值格式不匹配：HTML元素内的初始值前后带有空白字符，且innerHTML返回值为字符串类型，直接与数字0做相等判断会因类型、空白字符问题匹配失败。
• 缺少定时器清理逻辑：每次启动游戏/切换题目时如果重复创建定时器，会导致多个定时器并行，倒计时速度异常。

修复后代码 #

// 全局存储定时器ID，方便清理
let countDownTimer = null;

startGame = () => {
  // 清理已有定时器，避免并行运行
  if(countDownTimer) clearInterval(countDownTimer);
  // 修正innerHTML大小写错误
  document.getElementById("timer_sec").innerHTML = 10;
  questionCounter = 0;
  score = 0;
  availableQuesions1 = [...questions1];
  availableQuesions2 = [...questions2];
  availableQuesions3 = [...questions3];
  availableQuesions4 = [...questions4];

  countDownTimer = setInterval(
    () => {
      const timerDom = document.getElementById("timer_sec");
      // 去除空白后转数字再计算
      let currentSec = parseInt(timerDom.innerHTML.trim());
      currentSec--;
      timerDom.innerHTML = currentSec;
      // 倒计时归0时触发逻辑
      if(currentSec === 0) {
        clearInterval(countDownTimer);
        // 切换下一题，若需要切换后重新倒计时，可在getNewQuestion中重新启动定时器
        getNewQuestion();
      }
    },
    1000
  );
  getNewQuestion();
};

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