這篇文章將為大家詳細(xì)講解有關(guān)實(shí)現(xiàn)javascript文件動(dòng)態(tài)加載時(shí)是順序執(zhí)行的方法，小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

創(chuàng)新互聯(lián)公司是一家集網(wǎng)站建設(shè),江陰企業(yè)網(wǎng)站建設(shè),江陰品牌網(wǎng)站建設(shè),網(wǎng)站定制,江陰網(wǎng)站建設(shè)報(bào)價(jià),網(wǎng)絡(luò)營(yíng)銷(xiāo),網(wǎng)絡(luò)優(yōu)化,江陰網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強(qiáng)企業(yè)競(jìng)爭(zhēng)力。可充分滿(mǎn)足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時(shí)我們時(shí)刻保持專(zhuān)業(yè)、時(shí)尚、前沿，時(shí)刻以成就客戶(hù)成長(zhǎng)自我，堅(jiān)持不斷學(xué)習(xí)、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實(shí)用型網(wǎng)站。

之前在寫(xiě)js代碼時(shí)，想通過(guò)代碼動(dòng)態(tài)向html中插入一定數(shù)量的js文件，文件的依賴(lài)關(guān)系已經(jīng)按順序排好，關(guān)鍵代碼大致如下：

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

但是在代碼執(zhí)行的過(guò)程中，很高頻率的報(bào)同一個(gè)錯(cuò)，大概的意思就是說(shuō)：b.js在執(zhí)行的時(shí)候引用的a.js中的方法不存在。錯(cuò)誤出現(xiàn)的評(píng)率很高，但也不是100%出錯(cuò)。

通過(guò)分析我覺(jué)得原因應(yīng)該是這樣的： 雖然我是按數(shù)組中定義的順序去動(dòng)態(tài)創(chuàng)建script標(biāo)簽去加載對(duì)應(yīng)的js文件，但是由于文件的大小以及網(wǎng)絡(luò)等因素，導(dǎo)致各個(gè)文件現(xiàn)在完成的次序并不完全等于請(qǐng)求的次序。比如上面的例子中，如果a.js文件比較大，下載的比b.js慢，這樣當(dāng)b.js下載完成并開(kāi)始執(zhí)行的時(shí)候，他所依賴(lài)的a.js中的變量或方法就會(huì)獲取不到。

想到的解決方法就是，等前一個(gè)文件加載完畢之后再去加載下一個(gè)文件，大致代碼如下：

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

上面的方法也可以改為鏈?zhǔn)降腜romise調(diào)用或者回調(diào)嵌套，雖然最終解決了問(wèn)題，但是有一個(gè)問(wèn)題，文件從異步加載變成了同步加載，增加了的文件下載的時(shí)間，文件越多的時(shí)候影響越明顯。所以正確的思路應(yīng)該是異步加載文件，但是執(zhí)行一個(gè)文件的時(shí)候需要等到它所依賴(lài)的文件加載完畢并首先執(zhí)行，對(duì)于這個(gè)問(wèn)題，大家可以借鑒第三方庫(kù)如require.js, 或者es6中引入的模塊化功能完美解決這些問(wèn)題。

關(guān)于實(shí)現(xiàn)javascript文件動(dòng)態(tài)加載時(shí)是順序執(zhí)行的方法就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到。

當(dāng)前題目：實(shí)現(xiàn)javascript文件動(dòng)態(tài)加載時(shí)是順序執(zhí)行的方法
地址分享：http://www.chinadenli.net/article30/geehso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、靜態(tài)網(wǎng)站、定制網(wǎng)站、網(wǎng)站營(yíng)銷(xiāo)、ChatGPT、關(guān)鍵詞優(yōu)化

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)