按顺序加载JavaScript脚本

我正在以异步方式使用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);
}

你可以看到它在这个地方运行

---

有没有一种优雅的方法可以确保脚本按照定义的顺序加载？

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

您可以在另一个函数的回调中调用下一个ajax函数

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

---

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

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

---

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

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：要求只是脚本按顺序加载到内存中。。。并不是说它们是按顺序从服务器上取下的。

$.getScript（）

返回一个jQuery延迟对象，以便您可以像这样使用它

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

Fiddle

函数加载脚本（URL、回调）{
var i=0；
（函数loadNextScript（）{
if（i

我认为这并不优雅。当您添加新文件以加载时，代码将变得更难阅读。这更多的是一个如何做到这一点的示例。当然，您总是可以将

getFormScript

调用（以及其他调用）包装到它自己的函数中，并调用它们。但是如何实现顺序加载的技术并没有改变。是的，但是，这个请求仍然是一种“优雅的”方式。这只是我的意见。IMHO中最干净的解决方案。你甚至可以对每个脚本进行回调。他的要求是按顺序加载脚本。如果在其他脚本中存在依赖项，则尤其如此。我的回答并不排除这一点，除非我遗漏了什么？啊，好的。。。我想说的是，如果在各自的回调函数中一个接一个地链接ajax调用，不仅会降低开发人员的可读性，还意味着它们会按顺序被拉下来，并使用更多的堆栈。我认为他的要求只是它们按顺序加载到内存中，而不是按传输顺序加载。是的，我一直在研究我的最终解决方案：）-谢谢。

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