动画不会按顺序播放，但会同时播放

Question

我正在制作西蒙风格的游戏，我可以让动画播放图案中的最后一种颜色，但它不会播放整个图案。我尝试了几种不同的方法：

function nextTurn() {
  patternComputer.push(getNextColor());
  for (i = 0; i < patternComputer.length; i++) {
    setTimeout(function() {
      animateColor(patternComputer[i]);
      playSound(patternComputer[i]);
    }, 500);
  }
  patternPlayer.length = 0;
}

这个通过 for 循环运行，但在时间过去之前根本不进入 setTimeout 函数，但到那时，i 是不正确的。我也尝试过将它完全从 setTimeout 中取出，但这当然会让每个动画和声音同时播放。我怎样才能让它动画并播放 patternComputer[0] 的声音，然后等待半秒钟，然后播放 patternComputer[1]，然后等待半秒钟，然后播放 patternComputer[2]...等等。我不知道如何暂停代码并让它在每次迭代中缓慢循环。这可能吗？我应该找到不同的解决方案吗？谢谢！ :)

Answer 1

请注意 javascript 运行s 在单线程中使用 Event Loop.

这里的问题是您正在注册 n 个超时，这些超时将在主线程注册后运行 500 毫秒。一旦这 500 毫秒过去，它们都会运行几乎同时。

为了修复您的代码并使它们运行间隔 500 毫秒，您需要从 setTimeout 回调您的代码。另一个更简单的解决方案（但不理想）是这样的：

for (i = 0; i < patternComputer.length; i++) {
    setTimeout(function() {
      animateColor(patternComputer[i]);
      playSound(patternComputer[i]);
    }, 500 * (i+1));
  }

动画不会按顺序播放，但会同时播放

Animations won't play in order, but all at once

javascript

settimeout