15

我正在 IFRAME 中进行 QUnit 测试，并且有一个递归 JavaScript 函数，可以在启动 QUnit 之前将所有脚本从父页面加载到 IFRAME。这很好用。我的问题是我们的一些脚本使用 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();
}

实际代码类似，但涉及scripts[]使用 JavaScript 标记“src”属性填充数组“”的 jquery 选择器。

谢谢！

4

5 回答 5

23

如果您使用的是 jQuery 1.6+，那么您可以使用holdReady. 只需$.holdReady(true)在脚本的顶部设置，然后在QUnitStartset的开头$.holdReady(false)。

于 2011-05-16T20:47:46.187 回答
5

这段代码对我有用；$(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()脚本完成之前不会传递最后运行的代码，此方法将在所有情况下保持执行顺序。

于 2016-08-10T20:46:00.103 回答
4

如果您使用 jQuery 1.6 或更高版本，您可以使用holdReady延迟触发的就绪事件。

对于 1.4.3 或更高版本，您可以使用 $.readyWait 属性来延迟就绪事件，Demo Here（不是我的代码）

如果您有兴趣了解 jquery 如何处理该行的就绪事件搜索

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

在您的 jquery.js 开发人员副本中

于 2011-05-16T20:49:12.183 回答
0

只是为了填写其他人留下的地方，您可以在 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>
于 2012-10-03T15:33:45.603 回答
0 
<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>
于 2014-02-13T13:57:15.653 回答