Question

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

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

谢谢！

Answer 1

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

Answer 2

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

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

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

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

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

Answer 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()。

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

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

如何在设置变量之前延迟document.ready？

5 个答案: