Loading JavaScript Scripts in Order

Question

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?

yeah, I've been looking at that my end-game solution :) - thanks. — davy
– davy, Commented Nov 30, 2012 at 8:30

cHao · Accepted Answer · 2012-11-29 16:40:22Z

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

answered Nov 29, 2012 at 16:40

cHao

87k21 gold badges147 silver badges178 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Antoine Lassauzay Over a year ago

Cleanest solution in IMHO. You can even have a per-script callback.

Bruno · Accepted Answer · 2012-11-29 16:43:51Z

2

$.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

edited Nov 29, 2012 at 16:43

answered Nov 29, 2012 at 16:38

Bruno

5,8222 gold badges29 silver badges44 bronze badges

Comments

Levi Botelho · Accepted Answer · 2012-11-29 16:23:44Z

2

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.

answered Nov 29, 2012 at 16:23

Levi Botelho

25.4k5 gold badges63 silver badges100 bronze badges

Comments

apparat · Accepted Answer · 2012-11-29 16:24:00Z

2

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

answered Nov 29, 2012 at 16:24

apparat

1,9522 gold badges21 silver badges36 bronze badges

3 Comments

Antoine Lassauzay Over a year ago

I don't think this is elegant. As you add new files to load, the code becomes harder to read.

apparat Over a year ago

This is more of an example how to do this. Of course you can always wrap the getFormScript call (and the others) into it's own function and call them instead. But the technique how to achieve sequential loading doesn't change.

Antoine Lassauzay Over a year ago

Yes, but still, the request was a 'nice and elegant' way. This is just my opinion.

krichard · Accepted Answer · 2012-11-29 16:25:00Z

0

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

answered Nov 29, 2012 at 16:25

krichard

3,70426 silver badges35 bronze badges

Comments

beyond-code · Accepted Answer · 2012-11-29 17:03:44Z

0

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.

edited Nov 29, 2012 at 17:03

answered Nov 29, 2012 at 16:25

beyond-code

1,4221 gold badge12 silver badges20 bronze badges

3 Comments

Bruno Over a year ago

His requirements asks for the scripts to be loaded sequentially. This is especially true if there are dependencies within the other scripts.

beyond-code Over a year ago

My answer does not preclude that, unless I have missed something?

beyond-code Over a year ago

Ahhh ok... what I was trying to say was the if you chain the ajax calls one after another in their respective callback functions you not only make it less readable for developers, it also means that they get pulled down sequentially and use more stack. I think his requirement was just that they get loaded into memory sequentially rather than order of transfer.

Collectives™ on Stack Overflow

Loading JavaScript Scripts in Order

6 Answers 6

1 Comment

Comments

Comments

3 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

Comments

Comments

3 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related