Question

Suppose I load these scripts from my host webpage :

<script src="http://www.mywebsite.com/widget/widget.js?type=normal" type="text/javascript"></script>
<script src="http://www.mywebsite.com/widget/widget.js?type=rotation" type="text/javascript"></script>

and I’d like to execute the second one only when the first one have finished (totally; it can contain asynch functions).

How can I do it?

Answer 1

Wrap the whole script in a function, like this:

(function(id) {
    var id = setInterval(function() {
        if (!window.doneLoading) return;
        clearInterval(id);

        // The whole script file goes here
        ...
    }, 50);
})();

The setInterval polls the (global, sorry) variable doneLoading. In the first script, you have to set doneLoading to true or any other non-false value when your async function is completely loaded, like at the end of an AJAX request maybe?

Edit: since I’m suggesting to add a global variable to the script, it may as well add a global function. So instead of setting up a setInterval call, wrap the second script inside a function… but like this:

function doneLoading() {
        // The whole script file goes here
        ...
}

In the first script file, at the end of your callback function, just call doneLoading().