What is an efficient way of waiting for a dynamically loaded Javascript file to finish loading?

Question

I'm loading a Javascript file that has a function in it that I'd like to call. This is not possible, since between 'initiating' the load, and actually calling the function, the JS isn't loaded yet. Of course, I could do something like setTimeout('functionCall();',5000); , but I don't think this is a very efficient method, and it seems really unstable to me. That's why I was wondering whether there was a better way to do it.

Here's the code I'm using. The function in question is called controllerStart . If I comment out the last line here, and type it into a Javascript terminal (like on Chrome developer tools), everything works.

    function loadController(name){
        clearAll();
        scriptContainer.innerHTML = '';
        var scriptElement = document.createElement('script');
        scriptElement.setAttribute('src','controllers/' + name + '.js');
        scriptElement.setAttribute('type','text/javascript');
        scriptContainer.appendChild(scriptElement);
        controllerStart();// <-- Doesn't work from here, but works on a terminal
    }

Thanks for taking a look!

Answer 1

call the function after you reference the Javascript.

JS loading is SYNCHRONOUS.

So.....

---- js library call -----

----- call the function here -----

Profit!

edit: specifically :

function loadController(name){
        clearAll();
        scriptContainer.innerHTML = '';
        var scriptElement = document.createElement('script');
        scriptElement.setAttribute('src','controllers/' + name + '.js');
        scriptElement.setAttribute('type','text/javascript');
        scriptContainer.appendChild(scriptElement);
        scriptElement.onload = new function(){controllerStart();}; 
       //something like that.
    }

edit 2: my bad - use "onload" not "load" - too much jquery on the brain

more about "onload" here: http://www.onlinetools.org/articles/unobtrusivejavascript/chapter4.html

Answer 2

There is a good post from Nicholas C. Zackas about it which you can read here , that includes just the code you want to use.

Basically it's just a function that includes both a URL of a JS file to load, and a callback to execute when it's been loaded. It then creates the <script> tag, attaches the callback to execute after it's loaded (via the onreadystatechange or the onload event) and inserts it into the DOM.

Then, all you need to do is call it like:

loadScript('controllers/' + name + '.js', controllerStart);

Answer 3

From the sound of it you're loading your JavaScript asynchronously. In more recent browsers there's an onload event on the tag which fires when it's finished loading. But if you need cross-browser support, the only way to do it is to either:

(a) if it's loaded from the same server as your page, load your javascript using AJAX and then execute it with eval() when it's loaded (instead of using <script> tags),

(b) if you control the file add an event trigger to the end of it which you then listen for in your main JavaScript file. JQuery's bind() and trigger() functions are handy for that.

(c) if it's loaded from somewhere else and you don't control it (but do have permission to redistribute it), relocate it to your server and follow (a).

You also could do away with asynchronous loading and just put a stream of <script> tags in your header, the old fashioned way. That guarantees that each script won't be run until after the previous script has finished.