How to pause javascript until something is done?

Question

To be as fast as possible, I will jump into the topic right now. I want to delay the script before jQuery is loaded.

Here is my problem: I have code which inserts jQuery.js automatically when jQuery isn't loaded yet:

if(typeof jQuery=="undefined") {
 var s=document.createElement("script");
 s.type="text/javascript";
 s.async=true;
 s.src="http://code.jquery.com/jquery-1.5.1.min.js";
 var x=document.getElementsByTagName("script")[0];
 x.parentNode.insertBefore(s, x);
}
$(document).ready(function() {
 //My code goes here, right?
});

It works perfectly to insert the script, but the problem is $(document).ready() does not wait until the script is loaded completely, it jumps down immediately while the script is being loaded. I want to pause right there, what should I do?

• user578895: I don't quite follow. $(document).ready is a jQuery feature, so if jQuery doesn't exist that code won't work. Can you post a more complete example?
• Cameron: @cwolves: I think the OP is trying to say that he'd like to pause execution before $(document).ready(...) until jQuery is loaded...
• xx3004: @Cwolves and Cameron: I want to pause the $(document).read(...) or exactly, I want to pause whole script before jQuery is loaded. Thank you for your reply. [x]

Answer 1

Like cwolves mentioned in the comment, this shouldn't be a problem - $(document).ready() should only work when jQuery is loaded.

However, if you find that you do need to wait until it's loaded, you could so something like this:

if(typeof jQuery=="undefined")
{
 var s=document.createElement("script");
 s.type="text/javascript";
 s.async=true;
 s.src="http://code.jquery.com/jquery-1.5.1.min.js";
 var x=document.getElementsByTagName("script")[0];
 x.parentNode.insertBefore(s, x);
 wait();
}
//...
function wait() {
 if(typeof jQuery=="undefined")
 {
 setTimeout(wait, 200);
 }
 else {
 //jQuery is loaded, do what you need to
 $(document).ready(docLoaded);
 }
}

Adapted from this post about loading jQuery with Greasemonkey scripts

• xx3004: It seems to be a good idea, but it makes my script unresponsive :-( [x]
• no.good.at.coding: Hm, that's odd, I have no idea why that might be. Have you tried increasing the timeout delay to something more than 200?

Answer 2

you can use window.setInterval to poll the status of jQuery:

(function() {
 function main() {
 // code to continue with
 }
 function jQueryLoaded() { 
 // test jQuery status here
 }
 var handle = window.setInterval( 
 function() { 
 if ( jQueryLoaded() ) {
 window.clearInterval(handle)
 main()
 }
 }, 1000 ); // 1000 msec interval
})();

• xx3004: You setInterval, it still moves on to the next scripts while the interval is runny, and it does not pause the script :-( [x]

Answer 3

Ahh, gotcha. That extra bit helped :)

What you want is for your code that depends on jQuery to execute when jQuery is loaded. To do this, we use the script's onload event, so:

function toBeExecuted(){
 // code goes here
}
if(!jQuery){
 var s = document.createElement("script");
 s.type = "text/javascript";
 s.src = "http://code.jquery.com/jquery-1.5.1.min.js";
 s.onload = toBeExecuted;
 // because IE just HAS to be different
 s.onreadystatechange = function () {
 if(s.readyState == 'loaded' || s.readyState == 'complete'){
 toBeExecuted();
 }
 }
 var x = document.getElementsByTagName("script")[0];
 document.getElementsByTagName('HEAD')[0].appendChild(s);
}else{
 toBeExecuted();
}

• xx3004: Uh, the problem is I want to make the script independently, that means I just copy it and paste to any page. If I do the above method, I will have to change the toBeExecuted() function, and that will probably messes my script. Thank you for your help, do you have any more idea? [x]
• user578895: your script goes IN the toBeExecuted function. The other stuff just makes it run immediately when jQuery is loaded, instead of checking again and again to see if it's loaded.

Answer 4

You may use native window.onload event which gets fired when the page is processed completely. All $.ready() functions will get called before it: https://developer.mozilla.org/en/DOM/window.onload

Note that there can only be one window.onload function. So you might have to take care for it. i.e. call it before calling your code.

More info: window.onload vs $(document).ready()

Especially the comments on Piskvor's posts are quite helpful.