如何用JavaScript的setTimeout实现H1标题颜色循环切换？

你的问题核心在于原代码只执行了一轮标题变色逻辑，没有在最后一步结束后触发重新开始的机制。另外原代码里的setTimeout时间计算也不符合你的需求（比如第一个标题的绿色停留时长不是10秒），我们可以通过递归调用循环逻辑来实现无限轮次的切换，同时让每个标题的停留时长精准匹配你的要求。

问题分析 #

原代码中，你只在startAuto里触发了前三次变色的setTimeout，但第三个标题变色18秒后，没有任何代码让流程回到第一个标题重新开始，所以只会执行一轮。而且时间设置上，second()的延迟是13000ms，这意味着第一个标题会停留13秒才切换，和你想要的10秒不符。

修正后的完整代码 #

<body onload="startAuto()"> 
  <h1 id="first">Text 1</h1> 
  <h1 id="second">Text 2</h1> 
  <h1 id="third">Text 3</h1> 
</body>

<script>
function startAuto() {
  // 用数组统一管理每个标题的ID和对应停留时长，后续新增标题只需修改这里
  const titleSettings = [
    { id: 'first', stayTime: 10000 },   // 10秒
    { id: 'second', stayTime: 15000 }, // 15秒
    { id: 'third', stayTime: 18000 }   // 18秒
  ];

  // 辅助函数：重置所有标题为默认颜色
  function resetColors() {
    titleSettings.forEach(item => {
      document.getElementById(item.id).style.color = "#333";
    });
  }

  // 核心循环函数，index参数表示当前要高亮的标题索引
  function cycleTitles(index = 0) {
    // 先重置所有标题颜色，避免多个标题同时高亮
    resetColors();
    // 高亮当前标题
    const currentTitle = document.getElementById(titleSettings[index].id);
    currentTitle.style.color = "#32A067";

    // 计算下一个要高亮的标题索引，用取余实现循环回到第一个
    const nextIndex = (index + 1) % titleSettings.length;

    // 等待当前标题的停留时长后，调用下一轮循环
    setTimeout(() => {
      cycleTitles(nextIndex);
    }, titleSettings[index].stayTime);
  }

  // 启动循环
  cycleTitles();
}
</script>

代码优势 #

1. 清晰的配置化管理：所有标题的ID和时长都存在数组里，后续要调整时长或新增标题，直接修改数组即可，无需改动核心逻辑。
2. 精准的时长控制：每个标题的绿色停留时长完全匹配你要求的10/15/18秒，到点后立即切换到下一个。
3. 无限循环逻辑：通过(index + 1) % titleSettings.length计算下一个索引，当最后一个标题结束后，自动回到第一个标题重新开始。
4. 避免多标题高亮：每次切换前都会调用resetColors重置所有标题颜色，确保同一时间只有一个标题是绿色。

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