JS 同時にfunctionを実行

Promiseを使って複数の処理を同時に実行するサンプルです。

複数の処理を同時に実行する処理は、複雑な記述になりがちです。

まとめて同時に発生させたり、それぞれエラーが発生したり、どこかで制御する処理を考えないとなりません。

そのときにPromiseオブジェクトが便利です。

以下は複数の処理を同時に実行する記述で、それをこのページで実行しています。

// promiseを作成する
var p1 = new Promise(function(resolve, reject) {
    v1.innerHTML = "p1実行";
    resolve();//解決の処理
});

var p2 = new Promise(function(resolve, reject) {
    v2.innerHTML = "p2実行";
    resolve();
});

var p3 = new Promise(function(resolve, reject) {
    v3.innerHTML = "p3実行";
    resolve();
    //reject(new Error('p3でエラー発生'));//拒否の処理
});

// Promise.allを使って、3つのpromiseを同時に実行している
Promise.all([p1, p2, p3]).then(function(v) {
    v_all.innerHTML = "すべての処理の実行完了";

    //それぞれのresolve(hoge)で値を渡すとvに配列で返さる
    console.log(v);  //上記の場合undefinedが３つ

}).catch(error => {
    //エラー処理をキャッチ
    v_err.innerHTML = error.message;
});

実行結果

次に３つ目のPromiseのp3でエラーをわざと発生させた場合

エラーをキャッチして表示を出し分けます。

このallのメソッドは、どれかのpromiseでエラーを発生しても、全て実行することがわかります。