按順序加載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'); });