Question

I have two arrays.

1. A list of urls to JavaScript files that I am registering with $.getScript(url);
2. A list of inline JavaScript commands to register with $(“html”).append(inline)

Any items in (2) may be dependant on any items in (1). Meaning that I have to be sure that all items in (1) have finished loading before any of (2) are registered.

I want to load all of (1) asynchronously… since it will be faster, but how do I ensure that all of these processes have finished before registering (2)?

Answer 1

I think this way it should work:

var scripts = [
  {"src": "script1", "loaded": false},
  {"src": "script2", "loaded": false},
  {"src": "script3", "loaded": false},
]
var commands = ["cmd1","cmd2","cmd3"];

for (var i = 0, l = scripts.length; i<l; i++){
  (function (script){
    $.ajax({
      url: script.src,
      dataType: 'script',
      success: function (){

        for (var k = scripts.length; k--;){
          if (scripts[k].src === script.src){
            scripts[k].loaded = true;
          }
        }

        var allReady = true;
        for (var k = scripts.length; k--;){
          if (!scripts[k].loaded){
            allReady = false;
          }
        }
        if (allReady){
          /*execute your inline commands*/
        }
      }
    });
  })(scripts[i]);
}