JavaScript進捗管理の詳しい説明

+-------------------------------------------------------------+
| |
| リソース |
| |
| +----------+ +-----------------+ +-----------------+ |
| | スクリプト1 | | モデル1 | | モデル2 | |
| +----------+ | | | | |
| | -------------+ | | -------------+ | |
| +----------+ | |model1.json | | | |model2.json | | |
| | スクリプト2 | | +-------------+ | | +-------------+ | |
| +----------+ | | | | |
| | +-------------+ | | +-------------+ | |
| +----------+ | | 素材1 | | | | 素材1 | | |
| | テクスチャ1 | | | +--------+ | | | | +--------+ | | |
| +----------+ | | |テクスチャ1| | | | | |テクスチャ1| | | |
| | | +--------+ | | | | +--------+ | | |
| +----------+ | | +--------+ | | | | +--------+ | | |
| | テクスチャ2 | | | |テクスチャ2| | | | | |テクスチャ2| | | |
| +----------+ | | +--------+ | | | | +--------+ | | |
| | +-------------+ | | +-------------+ | |
| | | | | |
| | +-------------+ | | +-------------+ | |
| | | マテリアル2 | | | | マテリアル2 | | |
| | +-------------+ | | +-------------+ | |
| +-----------------+ +-----------------+ |
| |
+-------------------------------------------------------------+

クラスアセット{
    ロード(onProgress) {
        新しいPromise((resolve) => {を返す
            if (typeof onProgress !== 'function') {
                onProgress = (_p) => { };
            }

            loadedCount = 0 とします。
            let totalCount = 10; // 注意: デモ用です
            onLoaded = () => {
                ロードされたカウント++;
                onProgress(読み込まれたカウント / 合計継続時間);
                読み込まれたカウントが合計カウントの場合、解決します。
            };

            約束.すべて(
                this.refAssets.map(asset => asset.load().then(onLoaded))
            );
        });
    }
}

+--------------------------------------------------------------------+
| |
| |
| 総進捗状況 |
| |
| +---------+----------+-----------+----------+---------+---------+ |
| | スクリプト1 | スクリプト2 | テクスチャ1 | テクスチャ2 | モデル1 | モデル2 | |
| | (0~1) | (0~1) | (0~1) | (0~1) | (0~1) | (0~1) | |
| +---------+----------+-----------+----------+---------+---------+ |
| |
| モデル1 |
| +-------------+------------------------+-----------+ |
| | model1.json | マテリアル1 | マテリアル2 | |
| | (0~1) | (0~1) | (0~1) | |
| +------------------------+------------------------+ |
| | テクスチャ1 | テクスチャ2 | |
| | (0~1) | (0~1) | |
| +----------+-------------+ |
| |
| モデル2 |
| +-------------+------------------------+-----------+ |
| | model2.json | マテリアル1 | マテリアル2 | |
| | (0~1) | (0~1) | (0~1) | |
| +------------------------+------------------------+ |
| | テクスチャ1 | テクスチャ2 | |
| | (0~1) | (0~1) | |
| +----------+-------------+ |
| |
+--------------------------------------------------------------------+

var 進行 = [
  0, // スクリプト1,
  0, // スクリプト2,
  0, // テクスチャ1,
  0, // テクスチャ2,
  0, // モデル1,
  0, // モデル2
];

関数 onProgress(p) {
    // TODO: progresses[??] = p;
    progresses.reduce((a, b) => a + b, 0) / progresses.length を返します。
}

var 進捗 = [];
関数add(){
    進行します。push(0);
    var インデックス = progresses.length - 1;

    関数onProgress(p)を返す{
        progresses[インデックス] = p;
        減らす（）;
    };
}

関数reduce() {
    progresses.reduce((a, b) => a + b, 0) / progresses.length を返します。
}

クラスアセット{
    コンストラクター(totalCount) {
        this.loadedCount = 0;
        this.totalCount = 合計カウント;
        this.timerId = -1;
    }

    ロード(onProgress) {
        if (typeof onProgress !== 'function') {
            onProgress = (_p) => { };
        }

        新しいPromise((resolve) => {を返す
            this.timerId = setInterval(() => {
                this.loadedCount++;
                onProgress(this.loadedCount / this.totalCount);
                （this.loadedCount === this.totalCount）の場合{
                    タイマーIDをクリアします。
                    解決する（）;
                }
            }, 1000);
        });
    }
}

クラス Progress {
    コンストラクター(onProgress) {
        onProgress は、次の式で定義されます。
        this._list = [];
    }

    追加（） {
        this._list.push(0);

        定数インデックス = this._list.length - 1;

        戻り値 (p) => {
            this._list[インデックス] = p;
            これをreduce()します。
        };
    }

    減らす（） {
        定数 p = Math.min(1, this._list.reduce((a, b) => a + b, 0) / this._list.length);
        this.onProgress(p);
    }
}

const p = 新しい Progress(console.log);
定数asset1 = 新しいアセット(1);
定数asset2 = 新しいアセット(2);
定数asset3 = 新しいアセット(3);
定数asset4 = 新しいアセット(4);
定数asset5 = 新しいアセット(5);

Promise.all([
    アセット1.load(p.add())、
    アセット2.load(p.add())、
    アセット3.load(p.add())、
    アセット4.load(p.add())、
    アセット5.load(p.add())、
]).then(() => console.log('すべてのリソースが読み込まれました'));

/**
  出力 Promise { <state>: "pending" }
  
  0.2 
  0.3 
  0.366666666666666664 
  0.416666666666666663 
  0.456666666666666667 
  0.55666666666666668 
  0.6233333333333333 
  0.6733333333333333 
  0.7133333333333333 
  0.78 
  0.83000000000000001 
  0.8699999999999999 
  0.9199999999999999 
  0.96 
  1 
  すべてのリソースが読み込まれました 
 */