如何使用 Javascript 按順序動態加載內部腳本

Question

我有幾個腳本需要按特定順序動態包含。 我在這里查看並嘗試了幾個答案： How to include multiple js files using jQuery $.getScript() method

我的問題是這里的答案要么由於異步加載文件而在我的應用程序中不起作用，要么由於加載外部腳本而使問題變得過於復雜。 我需要動態加載的腳本是內部的。 （即：在我網站的服務器上）

除了許多其他嘗試之外，我還嘗試過：

$.when(
            $.getScript('/1.js'),
            $.getScript('/2.js'),
            $.getScript('/3.js'),
            $.getScript('/4.js'),
            $.getScript('/5.js'),
            $.Deferred(function (deferred) {
                $(deferred.resolve);
            })
        ).done(function() {         
            //Do Something
        });

但這不會以正確的順序加載腳本，並會引發一系列錯誤。

此外，我需要加載的腳本是內部的，我認為不需要所有 AJAX

我也嘗試過其他變體但無濟於事，希望有人能說明我如何一個接一個地動態加載內部腳本，最好是沒有 AJAX 調用和過於復雜？

Answer 1

getScript返回一個類似 Promise 的對象，因此您可以在循環中await它的每次調用，以便它們以串行方式進行處理：

(async () => {
  for (const path of ['/1.js', '/2.js', '/3.js']) {
    await $.getScript(path);
  }
  // Do something
})()
  .catch((err) => {
    // Something went wrong
  });

Answer 2

對於使用 jQuery 的任何人，我都改進了 @adeneo 腳本，因此它將按指定順序加載所有腳本。 它不進行鏈式加載，因此速度非常快，但如果您想要更快，請更改 50 毫秒的等待時間。

$.getMultiScripts = function(arr, path) {

    function executeInOrder(scr, code, resolve) {
        // if its the first script that should be executed
        if (scr == arr[0]) {
            arr.shift();
            eval(code);
            resolve();
            console.log('executed', scr);
        } else {
            // waiting
            setTimeout(function(){
                executeInOrder(scr, code, resolve);
            }, 50);
        }
    }

    var _arr = $.map(arr, function(scr) {

        return new Promise((resolve) => {
            jQuery.ajax({
                type: "GET",
                url: (path || '') + scr,
                dataType: "text",
                success: function(code) {
                    console.log('loaded  ', scr);
                    executeInOrder(scr, code, resolve);
                },
                cache: true
            });
        });

    });
        
    _arr.push($.Deferred(function( deferred ){
        $( deferred.resolve );
    }));
        
    return $.when.apply($, _arr);
}

如何使用：

var script_arr = [
    'myscript1.js', 
    'myscript2.js', 
    'myscript3.js'
];

$.getMultiScripts(script_arr, '/mypath/').done(function() {
    // all scripts loaded
});

Answer 3

在純js中

['/1.js', '/2.js',  '/3.js', '/4.js', '/5.js'].forEach(function(script) {
    var scriptElement = document.createElement("script");
    scriptElement.src = script;

    // append script element where you want (head or body)
    document.head.appendChild(scriptElement);
});