按顺序加载JavaScript脚本

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

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

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

小提琴here

Answer 2

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

Answer 3

您可以拨打下一个AJAX功能在其他

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

Answer 4

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

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

Answer 5

你可以做的是给每个呼叫分配给一个变量，因为它完成，然后做这样的事情：

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语句，然后你可以选择它们插入页面的顺序。

编辑：这是错误的，因为这会降低可读性和性能，你的电话像其他答案一样暗示在一起。

编辑2：要求只是脚本按顺序加载到内存中......而不是它们从服务器上依次下载。

Answer 6

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