为何setInterval方法在DOM环境中仅能生效一次？

先看最容易踩的坑：如果你的随机颜色是在setInterval外面生成的，那每次回调都会复用同一个颜色值，自然看起来没变化。

举个反例：

// 错误写法：颜色只生成一次，后续都是同一个值
const randomColor = `rgb(${Math.random()*255}, ${Math.random()*255}, ${Math.random()*255})`;
setInterval(() => {
  document.body.style.backgroundColor = randomColor;
}, 2000);

改成每次触发回调时重新生成颜色就正常了：

// 正确写法：每次执行都生成新的随机颜色
setInterval(() => {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  document.body.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
}, 2000);

另外排查其他可能原因：

• 检查是否有其他代码调用了clearInterval把定时器意外清除了，比如某些交互操作触发了清除逻辑
• 确认你要修改的元素选择器是否正确，比如如果元素是动态生成的，后续可能被替换导致找不到目标元素
• 打开浏览器控制台查看是否有报错，比如元素不存在、语法错误等，这些都会导致回调执行失败

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