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

我正在做一个西蒙·赛义德的程序，我在调用计算机的一系列动作并将它们显示在屏幕上时遇到了问题

我试图使用这个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;
  }

}

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

以下是用于更好可视化的代码笔：

---

由于

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函数内部，该函数只接受数组中的当前项。一个工作示例。

由于

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函数内部，该函数只接受数组中的当前项。一个工作示例。

这里有一种使用async/await的不同方法：

consttimeout=ms=>newpromise（res=>setTimeout（res，ms））；
（异步（）=>{
var i=1；
while（true）{
等待超时（1000）；
//迭代逻辑
console.log（i++）；
//终止逻辑
如果（i>10）{
打破
}
}
控制台日志（“完成”）；
})();这里有一种使用async/await的不同方法：


consttimeout=ms=>newpromise（res=>setTimeout（res，ms））；
（异步（）=>{
var i=1；
while（true）{
等待超时（1000）；
//迭代逻辑
console.log（i++）；
//终止逻辑
如果（i>10）{
打破
}
}
控制台日志（“完成”）；
})();
function intervalForEach (array, iteratee, delay) {
  let current = 0

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