按顺序加载 JavaScript 脚本答案

【问题标题】：Loading JavaScript Scripts in Order按顺序加载 JavaScript 脚本
【发布时间】：2012-11-29 16:20:32
【问题描述】：

我正在以异步方式使用 JavaScript $ajax 加载一些脚本。我需要它们按特定顺序加载，但目前它是随机的。

我的代码是：

loadScripts();

function loadScripts() {
    getBootStrapperScript(function (callback) {            
      alert('bootStrapper loaded');
    })

    getXMLScript(function (callback) {       
        alert('xml script loaded');
    });

    getFormScript(function (callback) {       
        alert('form script loaded');
    });       
}

function getBootStrapperScript(callback) {
    $.ajax({
        url: "http://localhost/eSales/scripts/bootStrapper.js",
        dataType: "script"
    }).done(callback); 
}

function getXMLScript(callback) {
    $.ajax({
        url: "http://localhost/eSales/scripts/LoadXML.js",
        dataType: "script"
    }).done(callback);
}

function getFormScript(callback) {
    $.ajax({
        url: "http://localhost/eSales/scripts/LoadForm.js",
        dataType: "script"  
    }).done(callback);
}

你可以看到它在这个jsFIddle中运行

是否有一种很好且优雅的方式来确保脚本按照定义的顺序加载？

【问题讨论】：

是的，我一直在研究我的最终解决方案 :) - 谢谢。

标签： javascript jquery ajax

【解决方案1】：

function loadScripts(urls, callback) {
    var i = 0;
    (function loadNextScript() {
         if (i < urls.length) {
              $.getScript(urls[i][0]).done(function() {
                  alert(urls[i][1] + " loaded");  // probably remove in production
                  ++i;
                  loadNextScript();
              });
         }
         else if (callback) callback();
    })();
}

loadScripts([
    ["http://localhost/eSales/scripts/bootStrapper.js", "bootstrapper script"],
    ["http://localhost/eSales/scripts/LoadXML.js", "xml script"],
    ["http://localhost/eSales/scripts/LoadForm.js", "form script"]
], function() { alert('done'); });

【讨论】：

恕我直言，最干净的解决方案。你甚至可以有一个每个脚本的回调。

【解决方案2】：

$.getScript() 返回一个 jQuery 延迟对象，所以你可以像这样使用它

$.getScript("firstScript").done( function( ) {
    $.getScript("secondScript").done( function( ) {
        $.getScript("thirdScript").done( function( ) {
            alert("scripts loaded");
        });
    });
});

小提琴here

【讨论】：

【解决方案3】：

预定义您的函数，然后通过将它们作为回调传递来依次执行它们。这是可行的，因为它要求每个都在传递到下一个之前加载，因此响应时间对您来说不再是问题。

【讨论】：

【解决方案4】：

可以在对方的回调中调用下一个ajax函数

getBootStrapperScript(function (callback) {            
    alert('bootStrapper loaded');
    getFormScript(function (callback) {       
        alert('form script loaded');
    });
})

【讨论】：

我不认为这很优雅。当您添加要加载的新文件时，代码变得更难阅读。
这更多的是如何做到这一点的示例。当然，您始终可以将 getFormScript 调用（和其他调用）包装到它自己的函数中并调用它们。但是实现顺序加载的技术并没有改变。
是的，但是，请求仍然是一种“漂亮而优雅”的方式。这只是我的意见。

【解决方案5】：

您可以在回调中加载它们以确保特定顺序。虽然这看起来很乱

function loadScripts() {
  getBootStrapperScript(function (callback) {            
    alert('bootStrapper loaded');
    getXMLScript(function (callback) {       
       alert('xml script loaded');
       getFormScript(function (callback) {       
         alert('form script loaded');
       });       
    }); 
  })
}

【讨论】：

【解决方案6】：

您可以做的是在每次调用完成时将其分配给一个变量，然后执行以下操作：

var script1, script2, script3;

var init = function() {

    if (script1 && script2 && script3)
    {
        // now inject scripts in order
    }

};

function getBootStrapperScript(callback) {
    $.ajax({
        url: "http://localhost/eSales/scripts/bootStrapper.js",
        dataType: "script"
    }).done(function(data) { 
        script1 = data; 
        init(); 
    }); 
}

// Do your other two calls in similar fashion

会发生的是 init() 只会在所有脚本变量都已分配后执行 if 语句，然后您可以选择它们插入页面的顺序。

编辑：像其他答案所暗示的那样将您的调用链接在一起是错误的，因为这会降低可读性和性能。

EDIT2：要求只是脚本按顺序加载到内存中......而不是它们按顺序从服务器上取下来。

【讨论】：

他的要求要求按顺序加载脚本。如果其他脚本中存在依赖关系，则尤其如此。
我的回答不排除这种情况，除非我错过了什么？
啊，好吧...我想说的是，如果您在各自的回调函数中一个接一个地链接 ajax 调用，您不仅会降低开发人员的可读性，还意味着他们按顺序拉下并使用更多堆栈。我认为他的要求只是将它们按顺序加载到内存中，而不是按传输顺序。