Как я могу отложить document.ready, пока переменная не установлена? - PullRequest
Новая
       4

Как я могу отложить document.ready, пока переменная не установлена?

13 голосов
/ 17 мая 2011

Я выполняю тестирование 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".

Спасибо!

Ответы [ 5 ]

21 голосов
/ 17 мая 2011

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

4 голосов
/ 17 мая 2011

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

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

если вы заинтересованы в выяснении того, как jquery обрабатывает готовое событие, ищите строку 

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

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

2 голосов
/ 10 августа 2016

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

0 голосов
/ 13 февраля 2014 
<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>
0 голосов
/ 03 октября 2012

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