Simon游戏闪烁效果异常：两个setInterval未按顺序触发

嘿，我太懂你这种头疼了——做Simon游戏的闪烁效果时，多个setInterval乱跑、不同步的问题真的很影响体验！咱们来一步步捋清楚问题出在哪，以及怎么解决：

问题根源 #

你当前用setInterval来遍历电脑动作序列，但setInterval是独立启动一个定时任务，如果你的代码里存在多次调用showMoves、或者其他地方也创建了未清理的定时器，就会导致多个定时器同时执行，互相干扰，自然就没法按顺序展示闪烁了。另外，setInterval的执行间隔是固定的，但如果你的闪烁动画（高亮+恢复）时长和间隔不匹配，也会出现动画重叠的情况。

解决方案：用异步控制代替setInterval #

最靠谱的方式是用async/await + Promise来实现顺序执行，确保上一次闪烁完全结束后，再执行下一个动作。这种方式代码清晰易读，也能从根源避免定时器并行的问题：

步骤1：封装单个颜色的闪烁函数（返回Promise） #

先把单个颜色的高亮+恢复逻辑封装成Promise，这样我们可以用await来等待动画完成：

// 假设你的color对象包含元素、正常色、高亮色的信息，比如：
// const green = { element: document.getElementById('green'), normal: '#00a800', highlight: '#00ff00' };

function flashColor(color) {
  return new Promise((resolve) => {
    // 第一步：切换到高亮色
    color.element.style.backgroundColor = color.highlight;
    
    // 第二步：等待500ms后恢复正常色
    setTimeout(() => {
      color.element.style.backgroundColor = color.normal;
      // 恢复后再等200ms（给视觉缓冲），然后标记这个闪烁完成
      setTimeout(resolve, 200);
    }, 500);
  });
}

步骤2：用async/await遍历序列 #

然后修改showMoves函数，用异步遍历确保顺序执行：

game.computerMoves = [green, blue, blue, blue, red, red, yellow];

async function showMoves() {
  // 关键：先清理可能存在的旧定时器，防止多个任务并行
  if (game.activeInterval) {
    clearInterval(game.activeInterval);
    game.activeInterval = null;
  }

  // 逐个遍历动作序列，等待每个闪烁完成后再执行下一个
  for (const color of game.computerMoves) {
    await flashColor(color);
  }
  
  console.log('电脑动作序列展示完毕！');
}

额外排查点 #

• 检查你的代码中是否有**多次调用showMoves**的情况（比如用户在电脑展示过程中点击了按钮），每次调用前一定要清理旧的定时器。
• 如果之前用了多个setInterval，确保所有定时器都被正确clearInterval，避免残留的定时任务干扰新的序列。

这种方式完全避免了多个定时器并行的问题，每个闪烁动作都会严格按序列顺序执行，视觉效果也会更流畅～

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