javascript 如何延迟 document.ready 直到设置变量？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6023036/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I delay document.ready until a variable is set?
提问by David
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.
我正在 IFRAME 中进行 QUnit 测试，并且有一个递归 JavaScript 函数，可以在启动 QUnit 之前将所有脚本从父页面加载到 IFRAME。这很好用。我的问题是我们的一些脚本使用 document.ready 来启动。
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.
做他们的工作。我不想仅仅为了测试而更改生产代码，并且我不希望这些生产脚本认为 IFRAME 文档在加载每个脚本之前已经“准备好”。
How I can delay "document.ready" itself?
我如何延迟“document.ready”本身？
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.
实际代码是类似的，但涉及scripts[]使用 JavaScript 标记“src”属性填充数组“ ”的 jquery 选择器。
Thanks!
谢谢！
回答by mVChr
回答by Robert Beuligmann
If your using jQuery 1.6 or higher you can use holdReadyto delay the ready event being fired.
如果您使用 jQuery 1.6 或更高版本，您可以使用holdReady延迟就绪事件被触发。
For 1.4.3 or higher you can use $.readyWait property to delay the ready event, Demo Here(not my code)
对于 1.4.3 或更高版本，您可以使用 $.readyWait 属性来延迟就绪事件，Demo Here（不是我的代码）
if your interested in figuring out how jquery handles the ready event search for the line
如果您有兴趣了解 jquery 如何处理该行的就绪事件搜索
jQuery( document ).trigger( "ready" ).unbind( "ready" );
in your developer copy of jquery.js
在您的 jquery.js 开发人员副本中
回答by Omari Victor Omosa
This code worked for me; To invoke $(window).load()inside $(document).ready()
这段代码对我有用；在$(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.
});
});
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.
此方法将通过确保$(window).load()在所有$(document).ready()脚本完成之前不传递您的最后运行代码，从而在所有情况下保持执行顺序。
回答by Theodor
Just to fill in where others left off, you may use this load order in your test.html
只是为了填写其他人停止的地方，您可以在 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>
回答by Artem Chernovol
<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
扩展测试，我测试了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>
