JavaScript For ループで非同期プロセスを使用するときに予期しない結果を回避するにはどうすればよいですか?

JavaScript For ループ内の非同期プロセス

JavaScript では、for ループが非同期で実行され、コールバックを操作するときに予期しない結果が生じる可能性があります。次の例を考えてみましょう:

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

このコードは、0 から 10 までの番号でアラートを表示することを目的としています。ただし、ループの非同期の性質により、複数のループ反復が発生した後にコールバック関数がトリガーされる可能性があります。その結果、i の値が大きくなります。

解決策

この問題を解決するには、各コールバックのクロージャでループのインデックスをキャプチャすることが重要です。これはいくつかの方法で実現できます。

• Use .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);
}

• 非同期関数の変更: 変数を非同期関数に渡し、それを関数に返します。 callback.

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 中国語 Web サイトの他の関連記事を参照してください。