如何使用 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);
});