Javascript：forループをsetIntervalと同時に繰り返します。

Question

私はSimon Saysプログラムで作業しています。コンピュータの一連の移動を呼び出して画面に表示する際に問題が発生しています。

このaiMoves（）関数を使用して配列を反復し、適切なカラーボタンを強調表示して各移動を表示しようとしています。

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

：

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を使用しようとしています

}

setInterval(moves, 2000); 
} 

問題は、のsetIntervalは非同期であり、すべての反復でありますaiMoves（）内のforループが同時に呼び出されます。配列の最初の要素が実行され、一時停止し、次の要素が実行されるように、これをどのように設定できますか？ここで

は、より良い視覚化のためのcodepenです： 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実施例。