如何在JavaScript中实现无限循环，持续切换页面背景颜色？

你当前的代码仅会执行一轮颜色切换就停止，要实现持续循环切换，可通过重构代码避免嵌套回调的冗余结构，同时实现循环逻辑：

优化思路 #

• 将所有待切换的颜色存入数组，便于遍历管理
• 用setInterval或递归setTimeout实现循环切换，替代多层嵌套的回调写法
• 保留你原有的初始延迟与切换间隔设置

修改后的代码 #

HTML（无需改动） #

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Home</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width" />
    <link rel="stylesheet" href="styles.css" />
    <script defer src="script.js"></script>
  </head>
  <body>
    <h1 onclick="startColorCycle()">HackerXGames</h1>
  </body>
</html>

JavaScript 实现（两种可选方案） #

方案1：使用setInterval（简洁高效，适合固定间隔场景）

// 定义颜色列表
const colors = [
  "blue",
  "red",
  "lightblue",
  "#800000",
  "#ff0066",
  "#ff6699",
  "#9900cc",
  "Lime",
  "#000099",
  "#ff9430"
];
let currentColorIndex = 0;
let cycleTimer = null;

function startColorCycle() {
  // 若已在循环，先清除避免重复启动
  if (cycleTimer) clearInterval(cycleTimer);
  
  // 保留原初始延迟2500ms
  setTimeout(() => {
    // 每隔1500ms切换一次颜色
    cycleTimer = setInterval(() => {
      document.body.style.backgroundColor = colors[currentColorIndex];
      // 切换到下一个颜色，到达末尾后回到开头
      currentColorIndex = (currentColorIndex + 1) % colors.length;
    }, 1500);
  }, 2500);
}

方案2：使用递归setTimeout（灵活度高，可自定义单步延迟）

const colors = [
  "blue",
  "red",
  "lightblue",
  "#800000",
  "#ff0066",
  "#ff6699",
  "#9900cc",
  "Lime",
  "#000099",
  "#ff9430"
];
let currentColorIndex = 0;
let cycleTimer = null;

function startColorCycle() {
  if (cycleTimer) clearTimeout(cycleTimer);
  
  // 初始延迟后启动循环
  setTimeout(() => {
    function switchColor() {
      document.body.style.backgroundColor = colors[currentColorIndex];
      currentColorIndex = (currentColorIndex + 1) % colors.length;
      // 递归调用实现循环
      cycleTimer = setTimeout(switchColor, 1500);
    }
    switchColor();
  }, 2500);
}

说明 #

• 点击标题即可启动循环，重复点击会重置循环状态
• 颜色数组可随时添加、删除或修改颜色，无需改动循环逻辑
• 两种方案均实现持续循环切换，可根据需求选择

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