JavaScript 루프에서 지연을 올바르게 구현하는 방법은 무엇입니까?

JavaScript 루프에 지연 추가

JavaScript에서는 실행 속도를 제어하기 위해 루프 내에서 지연이 필요한 시나리오를 흔히 접하게 됩니다. 그러나 이 지연을 구현하는 것은 까다로울 수 있습니다.

원래 접근 방식과 그 함정

처음에는 루프의 각 반복에 대해 3초 지연을 도입하기 위해 아래 코드가 사용되었습니다.

alert('hi');

for(var start = 1; start < 10; start++) {
  setTimeout(function () {
    alert('hello');
  }, 3000);
}

그러나 이 접근 방식은 setTimeout() 함수가 non-blocking이기 때문에 의도한 결과를 얻지 못했습니다. 결과적으로 루프가 빠르게 실행되어 여러 개의 3초 제한 시간 트리거가 빠르게 연속적으로 시작되었습니다. 이로 인해 3초 후에 첫 번째 알림('안녕하세요') 팝업이 나타난 후 지연 없이 지속적으로 알림('안녕하세요') 팝업이 표시되었습니다.

지연 문제 해결

이 문제를 해결하려면 다음 접근 방식을 사용하는 것이 좋습니다.

var i = 1;                  // Set counter to 1

function myLoop() {         // Create loop function
  setTimeout(function() {   // Call 3s setTimeout when loop is called
    console.log('hello');   // Your code here
    i++;                    // Increment counter
    if (i < 10) {           // If counter < 10, call loop function
      myLoop();             // .. again, triggering another 
    }                       // .. setTimeout()
  }, 3000)
}

myLoop();                   // Start the loop

이 수정된 접근 방식은 재귀 함수를 활용합니다. myLoop()는 함수가 호출될 때마다 3초 setTimeout()을 시작합니다. setTimeout() 콜백 내에서 카운터 i를 증가시키면 함수는 지연 후 루프 반복을 계속할 수 있습니다. 이렇게 하면 루프의 후속 반복이 실행되기 전에 지정된 시간 동안 대기하게 됩니다.

위 내용은 JavaScript 루프에서 지연을 올바르게 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!