비동기 작업이 JavaScript의 루프 반복 값을 방해하지 않도록 하려면 어떻게 해야 합니까?

JavaScript for 루프 내 비동기 처리: 루프 반복 값 보존

비동기 프로그래밍에서는 작업이 시작되고 실행이 계속됩니다. 메인 스레드. 이로 인해 for 루프와 같은 동기 제어 흐름의 진행과 비동기 작업의 결과를 동기화하려고 할 때 문제가 발생할 수 있습니다.

다음 for 루프를 고려하세요.

let i;
let j = 10;
for (i = 0; i < j; i++) {
  asynchronousProcess(callbackFunction() {
    alert(i);
  });
}

목표는 0부터 10까지의 숫자를 보여주는 일련의 경고를 표시하는 것입니다. 그러나 asynchronousProcess 함수의 비동기 특성으로 인해 콜백 함수는 루프가 실행된 후에 트리거됩니다. 여러 번의 반복을 완료했습니다. 결과적으로 경고 값이 의도한 순서로 표시되지 않습니다.

해결책: 함수 클로저를 사용하여 루프 값 캡처

이 문제를 해결하려면 다음이 필요합니다. 콜백 함수가 호출될 때 루프의 각 반복이 고유한 i 값을 갖도록 보장합니다. 이는 함수 클로저 내에서 루프 변수를 캡처하여 달성할 수 있습니다.

이는 IIFE(즉시 호출 함수 표현식)를 사용하여 수행할 수 있습니다.

for (var i = 0; i < j; i++) {
  (function(cntr) {
    asynchronousProcess(function() {
      alert(cntr);
    });
  })(i);
}

이 예에서 값 i는 IIFE에 cntr로 전달되고 함수 클로저는 각 반복이 고유한 값을 갖도록 보장합니다. i.

또는 루프 변수를 매개변수로 받아들이는 외부 함수를 만들 수 있습니다.

function logIndex(index) {
  console.log(index);
}

for (var i = 0; i < j; i++) {
  asynchronousProcess(logIndex.bind(null, i));
}

ES6 let 변수 선언 사용

ES6의 도입으로 블록 범위 변수를 생성하는 let을 사용하여 루프 변수를 선언하는 것이 가능해졌습니다. 이는 루프의 각 반복이 고유한 i 값을 갖도록 하는 편리한 방법을 제공합니다.

for (let i = 0; i < j; i++) {
  asynchronousProcess(function() {
    alert(i);
  });
}

참고:

다음 사항에 유의하는 것이 중요합니다. 이러한 각 솔루션은 함수 종료 또는 변수 선언 시 루프 변수의 복사본을 만듭니다. 비동기 작업이 완료된 후 루프 변수가 수정되면 이러한 복사본에는 업데이트된 값이 반영되지 않습니다.

위 내용은 비동기 작업이 JavaScript의 루프 반복 값을 방해하지 않도록 하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!