So führen Sie Javascript-Dateien nacheinander aus, wenn sie dynamisch geladen werden (der Code lautet wie folgt)

Der Inhalt dieses Artikels befasst sich mit der sequentiellen Ausführung von Javascript-Dateien beim dynamischen Laden (der Code lautet wie folgt). Ich hoffe, dass er für Sie hilfreich ist . .

Als ich zuvor JS-Code geschrieben habe, wollte ich eine bestimmte Anzahl von JS-Dateien dynamisch in den Code einfügen. Die Abhängigkeiten der Dateien wurden grob geordnet wie folgt:

var jsFiles = ['somepath/a.js','somepath/b.js',...];
var head = document.head;
jsFiles.forEach((file) => {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = file;
    head.appendChild(script);
});

Aber während der Ausführung des Codes wird derselbe Fehler sehr häufig gemeldet, was wahrscheinlich bedeutet: Die Methode in a.js, auf die b.js während der Ausführung verweist, existiert nicht. Die Fehlerquote ist sehr hoch, allerdings ist es nicht 100 % fehlerfrei.

Durch die Analyse denke ich, dass der Grund wie folgt sein sollte: Obwohl ich Skript-Tags dynamisch in der im Array definierten Reihenfolge erstelle, um die entsprechenden js-Dateien zu laden, liegt es an Faktoren wie Dateigröße und Netzwerk, jede Datei Die Reihenfolge der Erledigung entspricht nun nicht mehr genau der Reihenfolge der Anfragen. Wenn beispielsweise im obigen Beispiel die a.js-Datei größer ist und langsamer heruntergeladen wird als b.js, werden die Variablen oder Methoden in a.js, von denen sie abhängt, nicht heruntergeladen, wenn b.js heruntergeladen wird und mit der Ausführung beginnt verfügbar ankommen.

Die Lösung, die mir in den Sinn kommt, besteht darin, auf das Laden der vorherigen Datei zu warten, bevor die nächste Datei geladen wird. Der ungefähre Code lautet wie folgt:

function loadJsFiles(jsFiles) {
    return new Promise((resolve, reject) => {
        var load = function(i) {
            var file = jsFiles[i];
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.onload = function() {
                i++;
                if(i === jsFiles.length) {
                    resolve();
                } else {
                     load(i);
                }
            }
            script.src = file;
            head.appendChild(script);
        };
        load(0);
    });
}

Die obige Methode kann auch geändert werden Ein verketteter Promise-Aufruf oder eine Callback-Verschachtelung lösten schließlich das Problem, aber es gab ein Problem, das vom asynchronen Laden zum synchronen Laden wechselte, was die Downloadzeit der Datei erhöhte, desto offensichtlicher werden die Auswirkungen sein. Die richtige Idee sollte also sein, Dateien asynchron zu laden, aber wenn Sie eine Datei ausführen, müssen Sie warten, bis die Dateien, von denen sie abhängt, zuerst geladen und ausgeführt werden. Bei diesem Problem können Sie von Bibliotheken von Drittanbietern wie require.js lernen , oder in es6 eingeführte Module Die Optimierungsfunktion löst diese Probleme perfekt.

Das obige ist der detaillierte Inhalt vonSo führen Sie Javascript-Dateien nacheinander aus, wenn sie dynamisch geladen werden (der Code lautet wie folgt). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!