CODEWITHSUNDEEP
javascriptjqueryajax
davy
davy

Reputation: 4562

Loading JavaScript Scripts in Order

I am loading a few scripts using JavaScript $ajax in an async manner. I need them to load in a certain order but at the moment it's random.

The code I have is:

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

You can see it running in this jsFIddle

Is there a nice and elegant way of ensuring the scripts load in the order they are defined?

Upvotes: 3

Views: 2121

Answers (6)

beyond-code
beyond-code

Reputation: 1422

What you can do is to assign each call to a variable as it completes, and then do something like this:

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

What will happen is that the init() will only execute the if statement when all the script variables have been assigned and then you can choose the order they get inserted into the page.

EDIT: It is wrong to chain your calls together like the other answers are suggesting as this will reduce readability and performance.

EDIT2: The requirement is only that the scripts load into memory sequentially... not that they are brought down from the server sequentially.

Upvotes: 0

Bruno
Bruno

Reputation: 5822

$.getScript() returns a jQuery deferred object so you can use it like so

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

Fiddle here

Upvotes: 2

cHao
cHao

Reputation: 86575

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

Upvotes: 8

krichard
krichard

Reputation: 3694

You could be loading them inside the callbacks to ensure a certain order. Although this looks messy

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

Upvotes: 0

apparat
apparat

Reputation: 1952

You can call the next ajax function in the callback of the other

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

Upvotes: 2

Levi Botelho
Levi Botelho

Reputation: 25234

Predefine your functions and then execute them one after another by passing them as callbacks. This works because it requires each to load before passing to the next one and as such response times won't be an issue any longer for you.

Upvotes: 2

Related Questions