How to add callback after dynamically loading javascript file

Question

I have the following function:

function require(url)
{
    var e = document.createElement("script");
    e.src = url;
    e.type="text/javascript";
    document.getElementsByTagName("head")[0].appendChild(e);
}

Which allows to dynamically load javascript at runtime, and I need to add a callback after loading some new files

For example when I

require('className.js');

and just after this call

var a = new window[className];

file has not been loaded yet, so it generates an error.

Answer 1

You can add an onLoad on the script element, but beware that on some older version of IE is a bit buggy.

Taking your code as a reference :

function require(url, callback) 
{
  var e = document.createElement("script");
  e.src = url;
  e.type="text/javascript";
  e.addEventListener('load', callback);
  document.getElementsByTagName("head")[0].appendChild(e);
}

require("some.js", function() { 
   // Do this and that
});

Answer 2

Further to Simone Gianni 's answer, in case you want to load a set of js files, plus run a callback at the end, where you want to ensure all files have loaded, you can do it recursively as follows:

function loadList(list, i, callback)
        {
            require(list[i], function()
            {
                if(i < list.length-1)
                {
                    loadList(list, i+1, callback);  
                }
                else
                {
                    callback();
                }
            });
        }

Call with:

    loadList(jsList, 0, function()
    {
        // code that applies after all URLs in jsList have loaded
    });