setTimeout()을 사용하여 JavaScript 루프에 지연을 올바르게 추가하는 방법은 무엇입니까?

시간 제한이 있는 JavaScript 루프에 지연을 추가하는 방법

JavaScript에서는 setTimeout을 사용하여 루프 내에 지연을 추가할 수 있습니다. () 기능. 그러나 예상치 못한 결과를 방지하려면 해당 동작을 이해하는 것이 중요합니다.

다음 예를 고려하세요.

alert('hi');

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

이 코드는 "hi"라는 텍스트가 포함된 경고를 표시한 다음 3초 지연 후 "hello"라는 텍스트가 표시되고 후속 반복을 위해 지연이 반복됩니다. 그러나 실제로는 첫 번째 반복만 의도한 대로 작동합니다.

이 동작의 이유는 setTimeout()의 비차단 특성에 있습니다. 타이머를 트리거하지만 즉시 반환되므로 3초 지연이 발생하기 전에 루프가 계속 실행될 수 있습니다. 그러면 즉시 "안녕하세요" 알림이 표시되고 후속 알림이 지연 없이 계속 표시됩니다.

원하는 효과를 얻으려면 대체 접근 방식을 사용할 수 있습니다.

var i = 1; // set your counter to 1

function myLoop() { // create a loop function
  setTimeout(function() { // call a 3s setTimeout when the loop is called
    console.log('hello'); // your code here
    i++; // increment the counter
    if (i < 10) { // if the counter < 10, call the loop function
      myLoop(); // .. again which will trigger another 
    } // .. setTimeout()
  }, 3000);
}

myLoop(); // start the loop

여기서 접근 방식에서는 카운터가 루프 내에서 초기화되고 증가됩니다. 루프 함수는 setTimeout() 내에서 호출되어 각 반복이 실행되기 전에 3초의 지연을 갖도록 합니다. setTimeout() 콜백 내에서 루프를 유지함으로써 원하는 알림 간격이 달성됩니다.

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