Detaillierte Erklärung des JavaScript-Fortschrittsmanagements

+-------------------------------------------------------------+
| |
| Ressourcen |
| |
| +----------+ +-----------------+ +-----------------+ |
| | Skript1 | | Modell1 | | Modell2 | |
| +----------+ | | | | |
| | -------------+ | | -------------+ | |
| +----------+ | |model1.json | | | |model2.json | | |
| | Skript2 | | +------------+ | | +------------+ | |
| +----------+ | | | | |
| | +------------+ | | +------------+ | |
| +----------+ | | Material1 | | | | Material1 | | |
| | Textur1 | | | +--------+ | | | | +--------+ | | |
| +----------+ | | |Textur1| | | | | |Textur1| | | |
| | | +--------+ | | | | +--------+ | | |
| +----------+ | | +--------+ | | | | +--------+ | | |
| | Textur2 | | | |Textur2| | | | | |Textur2| | | |
| +----------+ | | +--------+ | | | | +--------+ | | |
| | +------------+ | | +------------+ | |
| | | | | |
| | +------------+ | | +------------+ | |
| | | Material2 | | | | Material2 | | |
| | +------------+ | | +------------+ | |
| +-----------------+ +-----------------+ |
| |
+-------------------------------------------------------------+

Klasse Asset {
    laden(beiFortschritt) {
        returniere neues Promise((auflösen) => {
            wenn (Typ von bei Fortschritt !== 'Funktion') {
                beiFortschritt = (_p) => { };
            }

            lass loadedCount = 0;
            let totalCount = 10; // HINWEIS: nur zur Demo
            let onLoaded = () => {
                geladeneAnzahl++;
                beimFortschritt(loadedCount / totalCont);
                wenn (loadedCount === totalCount) auflösen();
            };

            Versprechen.alle(
                dies.refAssets.map(asset => asset.load().then(onLoaded))
            );
        });
    }
}

+--------------------------------------------------------------------+
| |
| |
| Gesamtfortschritt |
| |
| +---------+---------+----------+----------+----------+--------+--------+ |
| | Skript1 | Skript2 | Textur1 | Textur2 | Modell1 | Modell2 | |
| | (0~1) | (0~1) | (0~1) | (0~1) | (0~1) | (0~1) | (0~1) | |
| +---------+---------+----------+----------+----------+--------+--------+ |
| |
| Modell1 |
| +-------------+--------------------------+-----------+ |
| | Modell1.json | Material1 | Material2 | |
| | (0~1) | (0~1) | (0~1) | |
| +------------------------+------------------------+ |
| | Textur1 | Textur2 | |
| | (0~1) | (0~1) | |
| +----------+------------+ |
| |
| Modell2 |
| +-------------+--------------------------+-----------+ |
| | Modell2.json | Material1 | Material2 | |
| | (0~1) | (0~1) | (0~1) | |
| +------------------------+------------------------+ |
| | Textur1 | Textur2 | |
| | (0~1) | (0~1) | |
| +----------+------------+ |
| |
+--------------------------------------------------------------------+

var fortschreitet = [
  0, // Skript1,
  0, // Skript2,
  0, // Textur1,
  0, // Textur2,
  0, // Modell1,
  0, // Modell2
];

Funktion onProgress(p) {
    // TODO: Fortschritte[??] = p;
    Rückgabewert: progresses.reduce((a, b) => a + b, 0) / progresses.length;
}

var schreitet voran = [];
Funktion add() {
    schreitet voran.push(0);
    var index = fortschreitet.länge - 1;

    Rückgabefunktion bei Fortschritt (p) {
        schreitet voran[index] = p;
        reduzieren();
    };
}

Funktion reduzieren() {
    Rückgabewert: progresses.reduce((a, b) => a + b, 0) / progresses.length;
}

Klasse Asset {
    Konstruktor(Gesamtzahl) {
        Dies.loadedCount = 0;
        dies.totalCount = Gesamtanzahl;
        diese.timerId = -1;
    }

    laden(beiFortschritt) {
        wenn (Typ von bei Fortschritt !== 'Funktion') {
            beiFortschritt = (_p) => { };
        }

        returniere neues Promise((auflösen) => {
            this.timerId = setInterval(() => {
                dies.loadedCount++;
                beim Fortschritt (dieser.geladeneAnzahl / dieser.Gesamtzahl);
                wenn (dieser.loadedCount === dieser.totalCount) {
                    LöschenInterval(diese.timerId);
                    lösen();
                }
            }, 1000);
        });
    }
}

Klasse Fortschritt {
    Konstruktor(beiFortschritt) {
        dies.onProgress = beim Fortschritt;
        diese._liste = [];
    }

    hinzufügen() {
        diese._list.push(0);

        const index = this._list.length - 1;

        zurückgeben (p) => {
            diese._liste[index] = p;
            dies.reduzieren();
        };
    }

    reduzieren() {
        const p = Math.min(1, diese._list.reduce((a, b) => a + b, 0) / diese._list.length);
        dies.onProgress(p);
    }
}

const p = neuer Fortschritt(console.log);
const asset1 = neues Asset(1);
const asset2 = neues Asset(2);
const asset3 = neues Asset(3);
const asset4 = neues Asset(4);
const asset5 = neues Asset(5);

Versprechen.alles([
    asset1.laden(p.add()),
    asset2.laden(p.add()),
    asset3.laden(p.add()),
    asset4.laden(p.add()),
    asset5.laden(p.add()),
]).then(() => console.log('alle Ressourcen geladen'));

/**
  Ausgabeversprechen { <Status>: "ausstehend" }
  
  0,2 
  0,3 
  0,366666666666666664 
  0,416666666666666663 
  0,456666666666666667 
  0,55666666666666668 
  0,6233333333333333 
  0,6733333333333333 
  0,7133333333333333 
  0,78 
  0,8300000000000001 
  0,869999999999999 
  0,919999999999999 
  0,96 
  1 
  alle Ressourcen geladen 
 */