如何讓javascript檔案動態載入時是順序執行的（程式碼如下）

這篇文章帶給大家的內容是關於如何讓javascript檔案動態載入時是順序執行的（程式碼如下），有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

之前在寫js程式碼時，想透過程式碼動態向html插入一定數量的js文件，文件的依賴關係已經按順序排好，關鍵程式碼大致如下：

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%出錯。

透過分析我覺得原因應該是這樣的： 雖然我是按數組中定義的順序去動態創建script標籤去加載對應的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中文網其他相關文章！