자바 스크립트 : setInterval을 통해 for 루프를 동 기적으로 반복합니다.

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 루프가 동시에 호출됩니다. 배열의 첫 번째 요소가 실행되고 일시 중지 된 후 다음 요소가 실행되도록 어떻게 설정합니까? for 루프가 완료 될 때까지 즉시 실행 https://codepen.io/nick_kinlen/pen/oGjMMr?editors=0010

Answer 1

때문에,이 시리즈에서 비동기 코드를 실행할 수있는 다른 방법이 필요합니다 : 여기

더 나은 시각화를위한 codepen입니다. 여기에 각각의 반복 사이에 지정된 지연과 배열을 통해 당신 루프를 할 수있는 간단한 추상화는 다음과 같습니다

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 실례입니다.