How can I delay document.ready until a variable is set?

Question

I am doing QUnit testing in an IFRAME and have a recursive JavaScript function that loads all of the scripts from the parent page into the IFRAME before starting QUnit. This works great. My problem is that some of our scripts use document.ready to make stuff start.

Something such as:

$(document).ready(function () {
    // blah
});

to do do their work. I'd prefer to not change production code just to account for tests and I don't want these production scripts to think the IFRAME document is "ready" until every scripts is loaded.

How I can delay "document.ready" itself?

Here is my pseudocode to give you an example to work from:

scripts[0] = "/foo/bar.js";
scripts[1] = "/blah/blah.js";

function RecursiveScriptStart(){
    // I want to set document.ready = false right here!
    if(scripts.length == 0) {
        QUnitStart();
        return;
    }
    RecursiveScriptLoader(0, scripts);
}

function RecursiveScriptLoader(currentScriptID, scripts) {
    $.getScript(scripts[currentScriptID], function () {
        if (currentScriptID == (scripts.length - 1)) {
            QUnitStart();
        }
        else {
            RecursiveScriptLoader(currentScriptID + 1, scripts);
        }
    });
}


function QUnitStart() {
        // I want to set document.ready = true right here!
        QUnit.stop();
        QUnit.start();
}

The actual code is similar, but involves a jquery selector populating the array "scripts[]" with JavaScript tag "src" properties.

Thanks!

[This](http://stackoverflow.com/questions/5852767/possible-to-defer-loading-of-jquery/5853028) question may be helpful. — Richard Marskell - Drackir, May 16 '11 at 20:36

score 23 · Accepted Answer · edited Oct 01 '12 at 14:41

23

If you're using jQuery 1.6+ then you can use holdReady. Just set $.holdReady(true) at the top of your script and then in the beginning of QUnitStart set $.holdReady(false).

edited Oct 01 '12 at 14:41

Petr Vostrel

2,324
16
23

answered May 16 '11 at 20:47

mVChr

49,587
11
107
104

1

@htellez without jQuery you wouldn't have a `$(document).ready()` block, so in order to answer that question we'd have to know more details about what you're using instead. Perhaps it's better asked as a separate question rather than in a comment to this one. – mVChr Jul 24 '14 at 08:20

score 5 · Answer 2 · answered Aug 10 '16 at 20:46

This code worked for me; To invoke $(window).load() inside $(document).ready()

$(document).ready(function() {
    $(window).load(function() {
        // this code will run after all other $(document).ready() scripts
        // have completely finished, AND all page elements are fully loaded.
    });
});

This method would preserve execution order in all cases by making sure that your run-last code is not passed to $(window).load() until all $(document).ready() scripts have completed.

very very useful. thanks. – Rasul Ebrahimzadeh Feb 11 '22 at 20:54 — Rasul Ebrahimzadeh, Feb 11 '22 at 20:54

score 4 · Answer 3 · edited May 18 '11 at 20:57

4

If your using jQuery 1.6 or higher you can use holdReady to delay the ready event being fired.

For 1.4.3 or higher you can use $.readyWait property to delay the ready event, Demo Here (not my code)

if your interested in figuring out how jquery handles the ready event search for the line

jQuery( document ).trigger( "ready" ).unbind( "ready" );

in your developer copy of jquery.js

edited May 18 '11 at 20:57

Glen Solsberry

11,960
15
69
94

answered May 16 '11 at 20:49

Robert Beuligmann

1,434
10
13

score 0 · Answer 4 · answered Oct 03 '12 at 15:33

Just to fill in where others left off, you may use this load order in your test.html

<script src="jquery.js"></script>
<script src="qunit.js"></script>
<script>$.holdReady(true);</script>
<script src="theThingIwantToTest.js"></script>
<script src="theTestScript.js"></script>

Artem Chernovol · Answer 5 · 2014-02-13T14:05:11.603

<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript">
            window.setInterval(function() {
                console.log(document.getElementById('waitForMe'));
            }, 500);
        </script>
    </head>
    <body>
        Before
        <script type="text/javascript" src="/php-with-sleep.php"></script>
        After
        <div id="waitForMe"></div>
    </body>
</html>

Extended test, I have tested RequireJs domReady plugin

<html lang="en">
    <head>
        <meta charset="utf-8">
        <script type="text/javascript" src="/vendor/require/require.js"></script>
        <script type="text/javascript">
            window.setInterval(function() {
                console.log(document.getElementById('waitForMe'));
            }, 500);

            require.config({
                baseUrl: '/',
                paths: {
                    domReady: 'vendor/require/plugin/dom-ready',
                    jQuery: 'vendor/jquery'

                },
                shim: {
                    async: {
                        exports: 'async'
                    },
                    jQuery: {
                        exports: 'jQuery'
                    }
                }
            });

            require(['domReady', 'jQuery'], function(domReady, $) {
                console.log('jQuery loaded');
                $(function() {
                    console.log('jQuery dom ready');
                });

                domReady(function() {
                    console.log('domReady requireJs plugin, callback');
                })
            });

            require(['domReady!', 'jQuery'], function(domReady, $) {
                console.log('domReady! (no callback)');
            });

            require(['domReady', 'jQuery'], function(domReady, $) {
                console.log('domReady plugin loaded');
            });
        </script>
    </head>
    <body>
        Before
        <script type="text/javascript" src="/php-with-sleep.php"></script>
        After
        <div id="waitForMe"></div>
    </body>
</html>

How can I delay document.ready until a variable is set?

5 Answers5