Javascript:使用 setInterval 同步迭代 for 循环

Question

我正在开发 Simon Says 程序，在调用计算机的一系列 Action 并将其显示在屏幕上时遇到了问题。

我正在尝试使用此 aiMoves() 函数来迭代数组并通过突出显示适当的颜色按钮来显示每个 Action 。我尝试使用 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 函数内部，该函数只接受数组中的当前项。 Here's一个工作示例。