为什么我的循环在迭代之间没有等待？设置超时（）

Question

我正在使用 jquery 构建一个西蒙说游戏 http://codepen.io/meek/pen/adrbOv，但我在逐个播放每个声音时遇到了一些问题。

游戏开始时，会生成一个包含 20 个声音（“动作”）的列表，每回合会一个一个地播放。因此，如果移动列表是 ['red', 'yellow', 'green']，则在第一回合播放“red”，在第二回合播放“red”和“yellow”，依此类推。

我已将轮数设置为 4，我试图让每个声音一个接一个地播放，直到播放 4 个声音。我正在使用此代码：

turn = 4;
var t = 1;
  while(t <= turn) {
    setTimeout(AIbutton(allMoves[t-1]), 1000);
    t++;
  }

AIbutton() 是播放声音的函数（模拟按钮按下），allMoves 是整个游戏中将播放的 20 个动作的列表。我希望它发生的是在循环的每次迭代中播放一个声音，然后再进入下一次迭代，但是会发生的是循环中的所有声音在 1000 毫秒的间隔后同时迭代播放.

我认为 setTimeout 会使其在迭代之间暂停？我怎样才能做到这一点？

Answer 1

setTimeout 异步运行，它不是阻塞的。如果你想等待超时完成，下一次“循环迭代”需要在你给 setTimeout 的函数回调中发生。

这样的事情会起作用：

turn = 4;
var t = 1;
ourTimeout(allMovies, turn, t);

function ourTimeout(allMovies, turn, t){
    AIbutton(allMoves[t-1]);
    if(t <= turn)
        setTimeout(ourTimeout(allMovies, turn, ++t), 1000);
}

@Alnitak 提到这行代码：

setTimeout(ourTimeout(allMovies, turn, ++t), 1000);`

需要改成这样：

setTimeout(function(){
        ourTimeout(allMovies, turn, ++t);
    }, 1000);

正如@Alnitak 所说，您只能将匿名或命名函数传递给 setTimeout。传递变量的技巧就是上面提到的变化（概念称为闭包）。