이 JavaScript 루프가 `setTimeout`과 함께 예기치 않은 결과를 생성하는 이유는 무엇입니까?

루프 및 setTimeout의 비동기 실행

다음 스크립트를 고려하세요.

for (var i = 1; i <= 2; i++) {
  setTimeout(function () { alert(i) }, 100);
}

예상 값 1과 2와 반대로, 스크립트는 3을 두 번 출력합니다. 이 동작은 JavaScript 이벤트 루프의 비동기 특성으로 인해 발생합니다.

JavaScript 이벤트 루프 이해

JavaScript의 이벤트 루프는 동기 스택과 비동기 대기열의 두 단계로 코드 실행을 처리합니다. 동기식 코드는 스택에서 즉시 실행되는 반면, setTimeouts와 같은 비동기식 코드는 나중에 실행되도록 대기열에 배치됩니다.

루프 관련 문제

스크립트에서 setTimeout 콜백 함수는 변수 i를 사용합니다. 그러나 i는 루프의 모든 반복에서 공유되며 콜백이 실행될 때마다 항상 최종 값 2를 참조합니다. 따라서 두 번 모두 3이 인쇄됩니다.

올바른 접근 방식

연속된 값이 인쇄되도록 하려면 각 콜백 함수에 대해 고유한 i 복사본을 만드세요. 이는 아래와 같이 함수 클로저를 사용하여 달성할 수 있습니다.

function doSetTimeout(i) {
  setTimeout(function () {
    alert(i);
  }, 100);
}

for (var i = 1; i <= 2; ++i) doSetTimeout(i);

이 스크립트에서 doSetTimeout 함수는 i 값을 클로저에 대한 로컬 변수로 캡처하여 각 콜백 함수가 올바른 값을 사용하도록 합니다. 값입니다.

위 내용은 이 JavaScript 루프가 `setTimeout`과 함께 예기치 않은 결과를 생성하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!