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

JavaScript 루프에서 지연 구현

JavaScript에서 루프로 작업할 때 실행을 제어하기 위해 지연 또는 절전 기간을 도입해야 하는 경우가 있습니다. 흐름. setTimeout() 함수를 사용하여 이를 달성하는 방법을 살펴보겠습니다.

시도 1: setTimeout() 사용

한 가지 일반적인 접근 방식은 setTimeout()을 사용하여 시간 기반 지연. 그러나 루프 내부에 setTimeout()을 직접 배치하면 예기치 않은 동작이 발생할 수 있습니다. 예를 들어, 다음 코드는 각 반복을 3초씩 지연시키려고 시도합니다.

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

이 코드는 처음에는 3초 후에 'hello' 메시지를 표시하지만 그 다음에는 지연 없이 계속해서 메시지를 표시합니다. 이는 setTimeout()이 비차단형이고 즉시 반환되어 지연 기간이 경과하기 전에 루프가 완료될 수 있기 때문에 발생합니다.

대체 접근 방식: 반복 루프

원하는 지연을 달성하려면 내부에서 setTimeout() 호출과 함께 반복 루프를 사용할 수 있습니다. 함수:

var i = 1;

function myLoop() {
  setTimeout(function () {
    console.log('hello');
    i++;
    if (i < 10) {
      myLoop();
    }
  }, 3000);
}

myLoop();

이 경우 myLoop() 함수가 처음에 호출되어 첫 번째 setTimeout() 트리거를 설정합니다. 그런 다음 setTimeout() 콜백 내에서 메시지가 인쇄되고 카운터가 증가하며 카운터가 여전히 10보다 작은 경우 myLoop() 함수가 다시 호출됩니다. 이렇게 하면 3초 지연이 경과한 후에만 루프의 다음 반복이 트리거됩니다.

setTimeout()과 함께 반복 루프를 사용하면 JavaScript 루프에 지연을 효과적으로 도입하고 실행 흐름이 정확합니다.

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