开发Simon类游戏时动画无法按序列顺序播放全部同时触发如何解决

问题核心原因 #

• 变量作用域问题：你代码中的循环变量i没有使用块级作用域声明，当setTimeout的回调函数执行时，循环已经跑完，i已经等于patternComputer的长度，所以每次都只会取到数组最后一位的元素。
• 定时延迟设置错误：你给所有回调统一设置了500ms的延迟，相当于所有播放任务都会在循环结束后同一时间触发，自然不会依次播放。

解决方案 #

方案1：原有代码最小改动

仅修改循环变量声明和延迟时间即可实现需求：

function nextTurn() {
  patternComputer.push(getNextColor());
  // 用let声明循环变量，每轮循环都会生成独立的作用域
  for (let i = 0; i < patternComputer.length; i++) {
    setTimeout(function() {
      animateColor(patternComputer[i]);
      playSound(patternComputer[i]);
    // 每个任务的延迟逐次叠加500ms，实现间隔播放
    }, 500 * (i + 1));
  }
  patternPlayer.length = 0;
}

方案2：更易维护的异步写法

如果后续需要调整逻辑、修改间隔时间，用async/await的写法逻辑更直观：

// 封装等待工具函数
function sleep(delay) {
  return new Promise(resolve => setTimeout(resolve, delay));
}

async function nextTurn() {
  patternComputer.push(getNextColor());
  patternPlayer.length = 0;
  for (let i = 0; i < patternComputer.length; i++) {
    // 直接按顺序执行播放逻辑
    animateColor(patternComputer[i]);
    playSound(patternComputer[i]);
    // 等待500ms再执行下一轮
    await sleep(500);
  }
}

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