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?

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? — Mark Kahn, Mar 21 '11 at 23:48
@cwolves: I think the OP is trying to say that he'd like to pause execution before `$(document).ready(...)` until jQuery is loaded... — Cameron, Mar 21 '11 at 23:56
@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] — xx3004, Mar 22 '11 at 15:18

no.good.at.coding · Answer 1 · 2011-03-22T00:01:07.607

2

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

edited Mar 22 '11 at 00:01

answered Mar 21 '11 at 23:55

no.good.at.coding

19,647
1
57
51

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

score 0 · Answer 2 · answered Mar 21 '11 at 23:58

0

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

})();

answered Mar 21 '11 at 23:58

wnrph

3,005
3
23
36

You setInterval, it still moves on to the next scripts while the interval is runny, and it does not pause the script :-( [x] – xx3004 Mar 22 '11 at 20:51

score 0 · Answer 3 · answered Mar 22 '11 at 00:03

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

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] — xx3004, Mar 22 '11 at 20:53
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. — Mark Kahn, Mar 22 '11 at 21:46

score 0 · Answer 4 · edited May 23 '17 at 11:43

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.

How to pause javascript until something is done?

4 Answers4

Linked