Question

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

中看到它正在运行

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

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

Answer 2

预定义您的函数，然后将它们作为回调传递一个接一个地执行它们。这是有效的，因为它要求每个人在传递到下一个之前加载，因此响应时间不再是你的问题。

Answer 3

你可以在另一个

的回调中调用下一个ajax函数

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

Answer 4

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

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

小提琴here

Answer 5

您可以在回调中加载它们以确保某个订单。虽然这看起来很乱

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

Answer 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：要求只是脚本按顺序加载到内存中......而不是它们是按顺序从服务器中删除的。

按顺序加载JavaScript脚本

6 个答案: