Download several js script asynchronously, but then execute them in order

Question

I'm building an application using Ember.js. There's an administration portion of the website that requires the use of some various JavaScript libraries.

I'd like to download these libraries only when the administrative route of the site is visited.

I figured I could do something like in the following StackOverflow answer:

https://stackoverflow.com/a/11803418/2014469

$.when(
    $.getScript( "/mypath/myscript1.js" ),
    $.getScript( "/mypath/myscript2.js" ),
    $.getScript( "/mypath/myscript3.js" ),
    $.Deferred(function( deferred ){
        $( deferred.resolve );
    })
).done(function(){

    //place your code here, the scripts are all loaded

});

But I'm nervous about the order of execution for those files.

Let's say that myscript2.js is dependent on some functions in myscript1.js.

Will myscript1.js be loaded (!)and executed(!) before myscript2.js?

If it isn't, how can I asynchronously download all of the files, but then execute them in order? I thought about just chaining .then():

$.getScript( "/mypath/myscript1.js" )
.then(function{$.getScript( "/mypath/myscript2.js" )})
.then(function{$.getScript( "/mypath/myscript3.js" )})

But that would wait until one has been downloaded and executed before it even starts downloading the next - I'd like to download all at the same time, but then execute them in order.

Thanks for any and all help.

Answer 1

You'll need a javascript loader that manages dependencies between scripts.

If requirejs is too big for your needs and you don't plan to write one yourself, take a look at these smaller libraries: http://microjs.com/#loader