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?
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 :
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
});
});
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().
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>
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);
}
}
