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