JavaScript 코드에 어떤 문제가 있습니까?

Question

나는 포럼 포스트를 기다리는 방법으로, 나 자신을 위해 약간의 시간을 투자하는 프로젝트를 만들고있다.

var factsArray = ['MIT has created a 3D version of Scratch, called StarLogo', 'Duck echos DO quack', 'Ostriches never stick their head in the sand', 'The cigarrete lighter was invented before the match'] 
var i = 0; 
function start() { 
    while (i < 20) { 
      setTimeout(function(){document.getElementById('content').innerHTML = factsArray[Math.floor(Math.random() * factsArray.length)];}, 3000); 
      i = i + 1; 
    } 
    setTimeout(function(){document.getElementById('content').innerHTML = "Sixty seconds are up! Go and post!";}, 3000); 
} 

그건 내 코드입니다. 지금까지는 배열의 항목 하나만 표시하고 거기에서 멈 춥니 다.

내가 원하는 것은 내 factsArray에서 매 3 초마다 60 초가 지날 때까지 하나의 사실을 표시 한 다음 "60 초가지나갑니다!"라고 표시합니다.

왜 내 코드는 3 초마다 하나의 사실 만 표시합니까?

Answer 1

setTimeout은 거의 비동기식이므로이 코드는 거의 동시에 같은 시간에 20 개의 시간 초과를 추가하므로 동시에 종료됩니다. 전체 타임 아웃에 아직 도달하지 않은 경우 하나의 타임 아웃 만 설정하고 타임 아웃의 콜백에서 다음 타임 아웃을 시작하는 것이 좋습니다. 마찬가지로 전체 시간 초과에 도달하면 마지막 문을 추가해야합니다.

setInterval 및 clearInterval을 사용하여이를 구현할 수도 있습니다.