JavaScript `for` 루프에 중첩된 `setTimeout`이 비연속적인 값을 인쇄하는 이유는 무엇입니까?

문제 이해: for 루프에 중첩된 setTimeout의 비연속 값 인쇄

JavaScript에서 setTimeout과 같은 비동기 함수는 콜백을 예약합니다. 지연 후 실행합니다. 루프 내에 배치하면 콜백에서 액세스하는 변수가 루프 상태와 동기화되지 않는 예기치 않은 동작이 발생할 수 있습니다.

예: 잘못된 값 경고

제공된 스크립트를 고려하세요.

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

이 코드는 값 1과 2를 경고하기 위한 것입니다. 연속적으로 3을 두 번 출력합니다. 그 이유는 i의 현재 값을 참조하는 콜백을 생성하는 setTimeout의 비동기적 특성에 있습니다.

함수 문자열 없이 i 전달

이 문제를 해결하려면 연속적인 값 인쇄를 보장하려면 각 setTimeout 콜백에 대해 고유한 i 인스턴스를 생성해야 합니다. 해결 방법은 다음과 같습니다.

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

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

각 콜백에 대한 명시적 함수를 생성하고 i를 인수로 전달하여 루프 반복마다 별도의 i 복사본을 생성합니다. 이를 통해 콜백은 실행 시 올바른 i 값을 참조하여 1과 2의 연속 인쇄를 보장합니다.

위 내용은 JavaScript `for` 루프에 중첩된 `setTimeout`이 비연속적인 값을 인쇄하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!