Как я могу отложить document.ready до тех пор, пока не будет задана переменная?

Я выполняю тестирование QUnit в IFRAME и имею рекурсивную функцию JavaScript, которая загружает все сценарии с родительской страницы в IFRAME перед запуском QUnit. Это отлично работает. Моя проблема в том, что некоторые из наших скриптов используют document.ready, чтобы начать работу.

Что-то вроде:

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

делать свою работу. Я бы предпочел не изменять производственный код только для учета тестов, и я не хочу, чтобы эти производственные сценарии думали, что документ IFRAME "готов", пока не загрузятся все сценарии.

Как я могу задержать сам document.ready?

Вот мой псевдокод, чтобы дать вам пример для работы с:

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

Фактический код аналогичен, но включает селектор jquery, заполняющий массив "scripts[]" с помощью свойств JavaScript "src".

Спасибо!

Ответы

Ответ 1

Если вы используете jQuery 1.6+, вы можете использовать holdReady. Просто установите $.holdReady(true) вверху вашего script, а затем в начале QUnitStart установите $.holdReady(false).

Ответ 2

Если вы используете jQuery 1.6 или выше, вы можете использовать holdReady для задержки запуска готового события.

Для версии 1.4.3 или выше вы можете использовать свойство $.readyWait, чтобы задержать готовое событие, Демо здесь (не мой код)

если вам интересно узнать, как jquery обрабатывает готовый поиск событий для строки

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

в вашей копии разработчика jquery.js

Ответ 3

Этот код работал у меня; Чтобы вызвать $(window).load() внутри $(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.
    });
});

Этот метод сохранит порядок выполнения во всех случаях, убедившись, что ваш последний код не передается на $(window).load() до тех пор, пока все сценарии $(document).ready() не будут завершены.

Ответ 4

Просто чтобы заполнить, где другие остановились, вы можете использовать этот порядок загрузки в своем 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>

Ответ 5

<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>

Расширенный тест, я протестировал модуль RequireJs domReady

<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>