1. ホーム
  2. javascript

[解決済み] JavaScriptでの非同期forサイクル

2023-04-30 07:14:01

質問

非同期呼び出しがあるまで待つループが必要です。次のようなもの。

for ( /* ... */ ) {

  someFunction(param1, praram2, function(result) {

    // Okay, for cycle could continue

  })

}

alert("For cycle ended");

どうすればいいのでしょうか?何かアイデアはありますか?

どのように解決するのですか?

JavaScriptでは同期と非同期を混在させることはできません。スクリプトをブロックすると、ブラウザもブロックされます。

ここでは完全なイベント駆動方式にする必要がありますが、幸いにも醜いものを隠すことができます。

EDITです。 コードを更新しました。

function asyncLoop(iterations, func, callback) {
    var index = 0;
    var done = false;
    var loop = {
        next: function() {
            if (done) {
                return;
            }

            if (index < iterations) {
                index++;
                func(loop);

            } else {
                done = true;
                callback();
            }
        },

        iteration: function() {
            return index - 1;
        },

        break: function() {
            done = true;
            callback();
        }
    };
    loop.next();
    return loop;
}

これにより、非同期の loop を提供します。もちろん、これをさらに変更して、例えばループの状態をチェックする関数を作成することもできます。

では、テストに入ります。

function someFunction(a, b, callback) {
    console.log('Hey doing some stuff!');
    callback();
}

asyncLoop(10, function(loop) {
    someFunction(1, 2, function(result) {

        // log the iteration
        console.log(loop.iteration());

        // Okay, for cycle could continue
        loop.next();
    })},
    function(){console.log('cycle ended')}
);

そして、その出力。

Hey doing some stuff!
0
Hey doing some stuff!
1
Hey doing some stuff!
2
Hey doing some stuff!
3
Hey doing some stuff!
4
Hey doing some stuff!
5
Hey doing some stuff!
6
Hey doing some stuff!
7
Hey doing some stuff!
8
Hey doing some stuff!
9
cycle ended