CODEWITHSUNDEEP
javascriptasynchronousload
markzzz
markzzz

Reputation: 47995

How can I block the execution of a script until another one is loaded?

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?

Upvotes: 1

Views: 1560

Answers (4)

MaxArt
MaxArt

Reputation: 22637

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().

Upvotes: 1

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382274

You're already doing it right : the scripts are executed in the order of integration in the page, not loading.

EDIT : as MaxArt pointed, this may not be what you're looking for. His answer is a good one. But generally, you'll want to use javascript usual patterns and event based logic to avoid this kind of problems :

  • have most of your files define only classes and functions (some of them taking callbacks as parameters)
  • have a main file launching this and calling the sequence of actions, the asynchronicity being handled via callbacks.

My main code usually looks (a little) like this :

$(window).ready(function() {
    var myBigEngine = new BigEngine();
    myBigEngine.init(function(){
      // do other things, no need to add other layers as user events and ajax message callback will do the rest
    });
});

Upvotes: 2

rt2800
rt2800

Reputation: 3045

Try applying defer="defer" attribute to second <script> declaration like

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

Upvotes: 1

Nhu Trinh
Nhu Trinh

Reputation: 13956

you can put second script init function in window.onload event

window.onload = function(){

// call function from second script

}

or with jQuery

$(function(){

// call function from second script

});

you can event add second script with this function

function loadScript(src){
    var f=document.createElement('script');
    if(f){
        f.setAttribute("type","text/javascript");
        f.setAttribute("src",src);
        document.getElementsByTagName("head")[0].appendChild(f);
    }
}

Upvotes: 0

Related Questions