JavaScript For 루프에서 비동기 프로세스를 사용할 때 예기치 않은 결과를 방지하려면 어떻게 해야 합니까?

JavaScript For 루프 내의 비동기 프로세스

JavaScript에서 for 루프는 비동기식으로 실행될 수 있으므로 콜백 작업 시 예상치 못한 결과가 발생할 수 있습니다. 다음 예를 고려하십시오.

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

이 코드는 0에서 10까지의 숫자로 경고를 표시하려고 합니다. 그러나 루프의 비동기 특성으로 인해 여러 루프 반복이 발생한 후에 콜백 함수가 트리거될 수 있습니다. 결과적으로 i의 더 높은 값이 표시됩니다.

해결책

To 이 문제를 해결하려면 각 콜백의 클로저에서 루프의 인덱스를 캡처하는 것이 중요합니다. 이는 여러 가지 방법으로 달성할 수 있습니다.

• .forEach()` 사용: forEach()는 각 반복마다 자체 함수 클로저를 생성합니다.

someArray.forEach(function(item, i) {
    asynchronousProcess(function(item) {
        console.log(i);
    });
});

• 다음을 사용하여 함수 클로저 만들기 IIFE:

var j = 10;
for (var i = 0; i < j; i++) {
    (function(cntr) {
        // Capture the value of `i` into `cntr`
        asynchronousProcess(function() {
            console.log(cntr);
        });
    })(i);
}

• 비동기 함수 수정: 변수를 비동기 함수에 전달하고 콜백에 반환하도록 합니다.

var j = 10;
for (var i = 0; i < j; i++) {
    asynchronousProcess(i, function(cntr) {
        console.log(cntr);
    });
}

• ES6 사용 let`: 사용 가능한 경우 let을 사용하여 루프 변수를 선언합니다.

const j = 10;
for (let i = 0; i < j; i++) {
    asynchronousProcess(function() {
        console.log(i);
    });
}

• Promise 및 async/await`:를 사용하여 직렬화 이 접근 방식은 순차를 보장합니다. 현대적인 비동기 작업 실행 환경.

async function someFunction() {
    const j = 10;
    for (let i = 0; i < j; i++) {
        // Wait for previous promise to resolve before proceeding
        await asynchronousProcess();
        console.log(i);
    }
}

• 작업을 병렬로 실행하고 결과 수집: Promise.all()을 사용하여 결과를 순서대로 수집합니다.

function someFunction() {
    let promises = [];
    for (let i = 0; i < 10; i++) {
        promises.push(asynchronousProcessThatReturnsPromise());
    }
    return Promise.all(promises);
}

someFunction().then(results => {
    // Array of results in order
    console.log(results);
}).catch(err => {
    console.log(err);
});

위 내용은 JavaScript For 루프에서 비동기 프로세스를 사용할 때 예기치 않은 결과를 방지하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!