3

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

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

4

6 回答 6

8 
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'); });
于 2012-11-29T16:40:22.370 回答
2

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

于 2012-11-29T16:23:44.953 回答
2

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

getBootStrapperScript(function (callback) {            
    alert('bootStrapper loaded');
    getFormScript(function (callback) {       
        alert('form script loaded');
    });
})
于 2012-11-29T16:24:00.503 回答
2

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

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

在这里提琴

于 2012-11-29T16:38:44.260 回答
0

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

function loadScripts() {
  getBootStrapperScript(function (callback) {            
    alert('bootStrapper loaded');
    getXMLScript(function (callback) {       
       alert('xml script loaded');
       getFormScript(function (callback) {       
         alert('form script loaded');
       });       
    }); 
  })
}
于 2012-11-29T16:25:00.047 回答
0

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

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

于 2012-11-29T16:25:39.293 回答