为什么我的循环不在迭代之间等待？的setTimeout()

Question

我正在使用jquery 构建一个Simon说游戏http://codepen.io/meek/pen/adrbOv,我在逐个播放每个声音时遇到了一些麻烦.

当游戏开始时,生成20个声音("移动")的列表,每个回合将逐个播放.因此,如果移动列表是['红色','黄色','绿色'],则轮流将播放一个'红色',轮流播放两个'红色'和'黄色'将播放,依此类推.

我把转弯设置为4,我试图让每个声音一个接一个地播放,直到播放4个声音.我正在使用此代码:

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

AIbutton()是播放声音的功能(模拟按钮按下),allMoves是整个游戏中将播放的20个动作的列表.我想要它发生的是在进行下一次迭代之前在循环的每次迭代中播放声音,但是发生的是循环中的所有声音在1000 ms的间隔之后同时迭代播放.

我认为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所述,您只能将anonoymous或named函数传递给setTimeout.传递变量的技巧是在上面提到的变化(概念称为闭包)时完成的.