'for' 루프의 'setTimeout'이 예기치 않은 값을 인쇄하는 이유는 무엇이며 이 문제를 어떻게 해결할 수 있습니까?

setTimeout을 사용하여 for 루프에서 연속 값 인쇄

문제:

다음 스크립트에서 setTimeout 함수는 for 루프 내에서 값을 순차적으로 경고하는 데 사용됩니다. 그러나 결과 출력에는 예상대로 '1'과 '2' 대신 '3' 값이 두 번 인쇄되는 것으로 표시됩니다.

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

이유:

for 루프의 i 값은 시간이 지남에 따라 수정되지만 setTimeout 함수는 원본에 대한 참조만 캡처하기 때문에 문제가 발생합니다. 변수.

해결책:

이 문제를 해결하려면 i 변수를 각 시간 초과 함수에 대한 고유한 값으로 캡처해야 합니다. 이는 i를 인수로 사용하고 이 인수로 setTimeout을 호출하는 새 함수를 생성하여 달성할 수 있습니다.

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

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

이 접근 방식을 사용하면 루프를 반복할 때마다 i 변수의 고유한 복사본이 생성됩니다. 경고된 값이 예상대로 연속적으로 인쇄되는지 확인합니다.

위 내용은 'for' 루프의 'setTimeout'이 예기치 않은 값을 인쇄하는 이유는 무엇이며 이 문제를 어떻게 해결할 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!