JavaScript 2分钟倒计时器故障排查：代码无法逐秒递减求助

现有代码核心问题 #

• 重复触发setInterval：代码首尾两次调用setInterval，页面加载后就自动开始计时，不符合「点击按钮才启动」的需求
• 点击事件绑定位置错误：button.addEventListener写在了countDown函数内部，每执行一次倒计时函数就会多绑定一次点击事件，会导致逻辑混乱
• 终止条件判断逻辑错误：误拿setInterval返回的计时器IDtimerId做终止判断，实际应该用剩余时间变量time判断
• 拼写错误：innerHTMl拼写错误，正确写法是innerHTML
• UI更新逻辑缺失：每秒触发的倒计时函数没有更新页面显示，只有点击按钮时才会更新一次文本

修改后完整可运行代码 #

// 初始化配置
const startingMinutes = 2
let time = startingMinutes * 60
let timerId = null // 初始为空，点击按钮后再赋值
const countdownEl = document.getElementById('countdown') // 显示倒计时的DOM元素，需和页面元素ID对应
const startBtn = document.getElementById('button') // 启动按钮元素，需和页面按钮ID对应

// 倒计时核心逻辑
function countDown() {
  const minutes = Math.floor(time / 60)
  let seconds = time % 60
  // 补0优化显示效果
  seconds = seconds < 10 ? '0' + seconds : seconds

  // 实时更新页面显示
  countdownEl.innerHTML = `${minutes} 分 : ${seconds} 秒`

  // 时间到终止逻辑
  if (time <= 0) {
    countdownEl.innerHTML = 'Time is up!'
    clearInterval(timerId)
    return
  }

  time--
}

// 全局仅绑定一次点击事件
startBtn.addEventListener('click', () => {
  // 避免重复点击生成多个并行计时器
  if (timerId) clearInterval(timerId)
  // 重置时间为初始的2分钟
  time = startingMinutes * 60
  // 启动计时器
  timerId = setInterval(countDown, 1000)
  // 立即触发一次显示，避免第一秒空白
  countDown()
})

配套页面结构参考 #

<div id="countdown">点击按钮开始计时</div>
<button id="button">启动2分钟倒计时</button>

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