JavaScript ファイルを動的にロードしたときに順次実行する方法 (コードは次のとおり)

この記事の内容は、JavaScript ファイルを動的にロードしたときに順次実行する方法に関するものです (コードは次のとおりです)。必要な方は参考にしていただければ幸いです。 。

以前、js コードを書いていたときに、コードを通じて一定数の js ファイルを HTML に動的に挿入したいと思いました。ファイルの依存関係を大まかに整理します。

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

しかし、コードの実行中に同じエラーが頻繁に報告されます。これはおそらく、実行中に b.js によって参照される a.js 内のメソッドが存在しないことを意味します。エラー率は非常に高くなりますが、100% エラーがないわけではありません。

解析の結果、その理由は次のとおりだと考えられます。配列に定義された順序でスクリプトタグを動的に作成し、対応するjsファイルをロードしますが、ファイルのサイズやネットワークなどの要因により、各ファイルの完了順序は、リクエストの順序と正確には一致しません。たとえば、上記の例では、a.js ファイルのサイズが大きく、b.js よりもダウンロードが遅い場合、b.js がダウンロードされて実行が開始されるときに、それが依存する a.js 内の変数またはメソッドは実行されません。到着します。

思いつく解決策は、前のファイルがロードされるのを待ってから次のファイルをロードすることです。おおよそのコードは次のとおりです。

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

上記のメソッドは次のように変更することもできます。チェーンされた Promise 呼び出しまたはコールバックのネストによって最終的に問題は解決されましたが、ファイルが非同期読み込みから同期読み込みに変更され、ファイルのダウンロード時間が増加するため、その影響はより顕著になります。したがって、ファイルを非同期にロードするのが正しい考え方ですが、ファイルを実行するときは、そのファイルが依存するファイルが最初にロードされて実行されるまで待つ必要があります。この問題については、require.js などのサードパーティ ライブラリから学ぶことができます。 、またはes6で導入されたモジュール 最適化機能はこれらの問題を完全に解決します。

以上がJavaScript ファイルを動的にロードしたときに順次実行する方法 (コードは次のとおり)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。