實(shí)現(xiàn)javascript文件動態(tài)加載時是順序執(zhí)行的方法

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

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

之前在寫js代碼時，想通過代碼動態(tài)向html中插入一定數(shù)量的js文件，文件的依賴關(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í)行的過程中，很高頻率的報同一個錯，大概的意思就是說：b.js在執(zhí)行的時候引用的a.js中的方法不存在。錯誤出現(xiàn)的評率很高，但也不是100%出錯。

通過分析我覺得原因應(yīng)該是這樣的： 雖然我是按數(shù)組中定義的順序去動態(tài)創(chuàng)建script標(biāo)簽去加載對應(yīng)的js文件，但是由于文件的大小以及網(wǎng)絡(luò)等因素，導(dǎo)致各個文件現(xiàn)在完成的次序并不完全等于請求的次序。比如上面的例子中，如果a.js文件比較大，下載的比b.js慢，這樣當(dāng)b.js下載完成并開始執(zhí)行的時候，他所依賴的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);
    });
}

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

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

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

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

廣告

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