jQuery/Javascript - 如何在继续执行函数之前等待操作的 DOM 更新 [英] jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with function
问题描述
我想要做的是在执行 CPU 密集型脚本之前更新一个简单的 div 说正在处理..."(运行需要 3-12 秒，没有 AJAX)然后更新 div 说完成的！"完成后.
What I'm trying to do is to update a simple div to say "Processing..." before executing a CPU-intensive script (it takes 3-12 seconds to run, no AJAX) then update the div to say "Finished!" when done.
我看到的是 div 永远不会更新为正在处理...".如果我在该命令之后立即设置断点，则 div 文本会更新，所以我知道语法是正确的.在 IE9、FF6、Chrome13 中的行为相同.
What I'm seeing is the div never gets updated with "Processing...". If I set a breakpoint immediately after that command, then the div text does get updated, so I know the syntax is correct. Same behavior in IE9, FF6, Chrome13.
即使绕过 jQuery 并使用基本的原始 Javascript，我也看到了同样的问题.
Even when bypassing jQuery and using basic raw Javascript, I see the same issue.
你会认为这会有一个简单的答案.然而，由于 jQuery .html() 和 .text() 没有回调钩子，这不是一个选项.它也没有动画，所以没有 .queue 可以操作.
You'd think this would have an easy answer. However, since the jQuery .html() and .text() don't have a callback hook, that's not an option. It's also not animated, so there is no .queue to manipulate.
您可以使用我在下面准备的示例代码自行测试，该示例代码显示了具有 5 秒高 CPU 功能的 jQuery 和 Javascript 实现.代码很容易理解.当您单击按钮或链接时，您永远不会看到正在处理..."
You can test this yourselves using the sample code I prepared below that shows both the jQuery and Javascript implementations with a 5 second high-CPU function. The code is easy to follow. When you click either the button or the link, you never see "Processing..."
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script type="text/javascript">
function addSecs(d, s) {return new Date(d.valueOf()+s*1000);}
function doRun() {
document.getElementById('msg').innerHTML = 'Processing JS...';
start = new Date();
end = addSecs(start,5);
do {start = new Date();} while (end-start > 0);
document.getElementById('msg').innerHTML = 'Finished JS';
}
$(function() {
$('button').click(function(){
$('div').text('Processing JQ...');
start = new Date();
end = addSecs(start,5);
do {start = new Date();} while (end-start > 0);
$('div').text('Finished JQ');
});
});
</script>
</head>
<body>
<div id="msg">Not Started</div>
<button>jQuery</button>
<a href="#" onclick="doRun()">javascript</a>
</body>
</html>
推荐答案
将其设置为处理，然后执行 setTimeout 以防止 cpu 密集型任务在 div 更新后运行.
set it to processing, then do a setTimeout to prevent the cpu intensive task from running until after the div has been updated.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" ></script>
<script>
function addSecs(d, s) {return new Date(d.valueOf()+s*1000);}
function doRun() {
document.getElementById('msg').innerHTML = 'Processing JS...';
setTimeout(function(){
start = new Date();
end = addSecs(start,5);
do {start = new Date();} while (end-start > 0);
document.getElementById('msg').innerHTML = 'Finished Processing';
},10);
}
$(function() {
$('button').click(doRun);
});
</script>
</head>
<body>
<div id="msg">Not Started</div>
<button>jQuery</button>
<a href="#" onclick="doRun()">javascript</a>
</body>
</html>
您可以根据需要修改 setTimeout 延迟，对于较慢的机器/浏览器，它可能需要更大.
you can modify the setTimeout delay as needed, it may need to be larger for slower machines/browsers.
您还可以使用警报或确认对话框来允许页面时间更新.
You could also use an alert or a confirm dialog to allow the page time to update.
document.getElementById('msg').innerHTML = 'Processing JS...';
if ( confirm( "This task may take several seconds. Do you wish to continue?" ) ) {
// run code here
}
这篇关于jQuery/Javascript - 如何在继续执行函数之前等待操作的 DOM 更新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
