How to load a list of javascript files and call a callback after all of them are interpreted?

Question

jQuery offers the getScript( file, callback) function that loads a script file, interprets it, and then calles a callback() - function.

If multiple files need to be loaded before executing the callback,one might think of a solution like this one:

function loadOrdered(files, callback) {
   $.getScript(files.shift(), files.length
       ? function(){loadOrdered(files, callback);}
       : callback
   );
}

However, this forces the files to be loaded in a very specific order, which means that the browser has to wait for the server to respond before loading the next script. This probably causes an unnecessary delay.

How can I achieve the same effect as with the above code, without forcing the browser to load the scrips sequentially?

Yes. One solution may be to add a "I'm done" call to the end of each .js file and count the number of calls. But of course if any files are external this won't work. — PhonicUK, Oct 25 '12 at 10:54

score 3 · Answer 1 · edited May 23 '17 at 10:28

3

Here is the solution I would propose :

function loadUnordered(scripts, callback){

var loadCount = scripts.length;

function done(){
    loadCount -=1;
    if (loadCount==0){ 
        callback();
    }
}

for ( var i=0; i<scripts.length; i++){
    $.getScript(scripts[i], done);
}

}

A similar solution was posted here: Execute function after all ajax .load() requests are finished

edited May 23 '17 at 10:28

Community

1
1

answered Oct 25 '12 at 10:40

Konstantin Schubert

3,242
1
31
46

score 3 · Accepted Answer · answered Oct 25 '12 at 10:44

3

You practically described the functionality of head.js , it seems to be what you are looking for.

answered Oct 25 '12 at 10:44

Nelson

49,283
8
68
81

I like this very much, but I have one question: How can I call head.js when the array of scripts that need to be loaded is only determined at runtime? – Konstantin Schubert Oct 25 '12 at 10:50
You are right, I made a mistake. But for the case that I want to specify the order that they are executed in, it IS a problem, or? Also, as far as I could see, the library adds a – Konstantin Schubert Oct 25 '12 at 10:57
Because re-interpreting the DOM would then cause the scripts to be interpreted again. – Konstantin Schubert Oct 25 '12 at 11:03
The files are cached when downloaded first time, so if html is re-interpreted the files won't be loaded again. – Nelson Oct 25 '12 at 11:04
No loaded (IF the browser caches), but they will be *called* again. If a script installs a listener on a button, calling the script again will cause the listener to be installed twice. I think this is a problem. – Konstantin Schubert Oct 25 '12 at 11:11
But the page is only re-interpreted when the user "refreshes" the page, and in that case is like a new page load and the scripts will execute just once.. can you describe in what scenario could your page be "re-interpreted" ? – Nelson Oct 25 '12 at 11:15
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/18575/discussion-between-konstantin-and-nelson) – Konstantin Schubert Oct 25 '12 at 11:17
It turns out that jQuery's getScript() - function uses the same approach: http://stackoverflow.com/a/691661/1375015 That means that my concerns were, if justified at all, not n argument in the discussion headers.js vs. getScript() – Konstantin Schubert Oct 28 '12 at 13:09

How to load a list of javascript files and call a callback after all of them are interpreted?

2 Answers2