Comment faire en sorte que les fichiers javascript s'exécutent séquentiellement lorsqu'ils sont chargés dynamiquement (le code est le suivant)

Le contenu de cet article explique comment exécuter les fichiers javascript de manière séquentielle lorsqu'ils sont chargés dynamiquement (le code est le suivant). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

Quand j'écrivais du code js auparavant, je voulais insérer dynamiquement un certain nombre de fichiers js en html via le code. Les dépendances des fichiers ont été disposées dans l'ordre. comme suit :

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);
});

Mais lors de l'exécution du code, la même erreur est signalée très fréquemment, ce qui signifie probablement : la méthode dans a.js référencée par b.js lors de l'exécution n'existe pas. Le taux d’erreur est très élevé, mais il n’est pas exempt d’erreurs à 100 %.

Grâce à l'analyse, je pense que la raison devrait être la suivante : bien que je crée dynamiquement des balises de script dans l'ordre défini dans le tableau pour charger les fichiers js correspondants, en raison de la taille du fichier et du réseau et d'autres facteurs , chaque fichier L'ordre d'achèvement n'est désormais plus exactement égal à l'ordre des requêtes. Par exemple, dans l'exemple ci-dessus, si le fichier a.js est plus volumineux et se télécharge plus lentement que b.js, alors lorsque b.js est téléchargé et démarre l'exécution, les variables ou méthodes dans a.js dont il dépend ne seront pas disponible.

La solution qui vient à l'esprit est d'attendre que le fichier précédent soit chargé avant de charger le fichier suivant. Le code approximatif est le suivant :

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);
    });
}

La méthode ci-dessus peut également être. remplacé par une promesse chaînée. Bien que l'appel ou l'imbrication de rappel résolve finalement le problème, il y a un problème. Le fichier passe du chargement asynchrone au chargement synchrone, ce qui augmente le temps de téléchargement du fichier. Plus il y a de fichiers, plus l'impact est évident. La bonne idée devrait donc être de charger les fichiers de manière asynchrone, mais lors de l'exécution d'un fichier, vous devez d'abord attendre que les fichiers dont il dépend soient chargés et exécutés. Pour ce problème, vous pouvez apprendre des bibliothèques tierces telles que require.js. , ou modules introduits dans es6 La fonction d'optimisation résout parfaitement ces problèmes.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!