求助：我的JavaScript代码中停止按钮无法正常工作该如何解决？

问题根源 #

每次点击「启动」按钮都会新建一个定时器，旧的定时器ID会被新值覆盖。如果多次点击启动，多个定时器会同时运行，点击「停止」时只能清除最后一个定时器，其余的仍在工作，就会出现停止按钮毫无反应的假象。

修复方案 #

1. 启动前检查是否已有运行中的定时器，避免重复创建
2. 停止定时器后重置ID，确保下次启动能正常触发

修正后的代码 #

// 生成随机十六进制颜色
const randomColor = function () {
  const hex = '0123456789ABCDEF';
  let color = '#';
  for (let i = 0; i < 6; i++) {
    color += hex[Math.floor(Math.random() * 16)];
  }
  return color;
};

let intervalId;
const startChangingColor = function () {
  // 已有定时器在运行时，直接返回不重复创建
  if (intervalId) return;
  intervalId = setInterval(() => {
    document.body.style.backgroundColor = randomColor();
  }, 3000);
};
const stopChangingColor = function () {
  clearInterval(intervalId);
  // 重置ID，保证下次启动能正常初始化定时器
  intervalId = null;
};

document.querySelector('#start').addEventListener('click', startChangingColor);
document.querySelector('#stop').addEventListener('click', stopChangingColor);

关键修改说明 #

• 启动函数里增加了if (intervalId) return;，防止重复点击启动导致多个定时器同时运行
• 停止函数里将intervalId设为null，避免下次启动时误判为已有定时器
• 把内部的changeBg函数替换成箭头函数，简化代码结构

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