Javascript：使用setInterval同步遍历for循环

Question

我正在使用Simon Says程序，但在调用计算机的一系列动作并将它们显示在屏幕上时遇到了问题。

我正在尝试使用此aiMoves（）函数来迭代数组并通过突出显示适当的颜色按钮来显示每个动作。 我正在尝试使用setInterval，以便第一个按钮突出显示，程序等待一秒钟，然后下一个按钮突出显示，如下所示：

function aiTurns(randNum){
  for(var i = 0; i < aiMoves.length; i++) {
    if(aiMoves[i] === 1){
      //sound1();
      $('#green').addClass("active");
      setTimeout(function(){
        $('#green').removeClass("active");
      }, 500);
    }
    else if(aiMoves[i] === 2){
      //sound2();
      $('#red').addClass("active");
      setTimeout(function(){
        $('#red').removeClass("active");
      }, 500);
    }
    else if(aiMoves[i] === 3) {
      //sound3();
      $('#yellow').addClass("active");
      setTimeout(function(){
         $('#yellow').removeClass("active");
        }, 500);
      }
      else if(aiMoves[i] === 4){
      //sound4();
      $('#blue').addClass("active");
      setTimeout(function(){
        $('#blue').removeClass("active");
      }, 500);
    }
    level--;
    playerTurn = true;
  }

}

我这样称呼它：

var moves = function() {
aiTurns(randomNumber());

}

setInterval(moves, 2000);
} 

问题是setInterval是异步的，aiMoves（）中for循环的所有迭代都被同时调用。 我如何设置它，以便执行数组的第一个元素，暂停它，然后执行下一个元素？

这是可更好可视化的代码库： https ://codepen.io/nick_kinlen/pen/oGjMMr?editors=0010

Answer 1

由于for循环会立即运行直到完成，因此您将需要另一种方式来串行运行异步代码。 这是一个简单的抽象，可让您在每次迭代之间以给定的延迟遍历数组：

function intervalForEach (array, iteratee, delay) {
  let current = 0

  let interval = setInterval(() => {
    if (current === array.length) {
      clearInterval(interval)
    } else {
      iteratee(array[current])
      current++
    }
  }, delay)
}

您的所有条件逻辑都可以放在iteratee函数内部，该函数仅接受数组中的当前项目。 这是一个工作示例。

Answer 2

这是使用async / await的另一种方式：

 const timeout = ms => new Promise(res => setTimeout(res, ms)); (async () => { var i = 1; while (true) { await timeout(1000); // iteration logic console.log(i++); // termination logic if(i > 10) { break; } } console.log("done"); })(); 

此处设定的时间间隔被完全以一取代无极使用的setTimeout ，一个AWAIT和while循环 。