在加载另一个脚本之前，如何阻止脚本的执行？

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

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
    });
});

Answer 2

尝试将defer =“defer”属性应用于第二个<script>声明

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

Answer 3

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

Answer 4

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);
    }
}