jQuery / Javascript - 在进行功能之前如何等待操纵的DOM进行更新 [英] jQuery/Javascript - How to wait for manipulated DOM to update before proceeding with function
问题描述
我看到的是，div从来没有被更新为Processing ...。如果我在该命令之后立即设置断点，那么div文本会被更新，所以我知道语法是正确的。即使在绕过jQuery并使用基本的原始Javascript时，我也看到同样的问题。
$ b
你会认为这会有一个简单的答案。然而，由于jQuery .html（）和.text（）没有回调钩子，所以不是一个选项。它也不是动画的，所以没有任何操作的排队。
您可以使用我在下面准备的示例代码来测试这个，这样就可以显示jQuery和Javascript实现5秒高CPU功能。代码很容易遵循。当您单击按钮或链接时，您将看不到处理...
<！DOCTYPE html>
< html>
< head>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js>< / script>
< script type =text / javascript>
函数addSecs（d，s）{return new Date（d.valueOf（）+ s * 1000）;}
函数doRun（）{
document.getElementById（'msg'）。 innerHTML ='处理JS ...';
start = new Date（）;
end = addSecs（start，5）;
do {start = new Date（）;} while（end-start> 0）;
document.getElementById（'msg'）。innerHTML ='完成JS';
}
$（function（）{
$（'button'）。click（function（）{
$（'div'）。 。'）;
start = new Date（）;
end = addSecs（start，5）;
do {start = new Date（）;} while（end-start> 0 ）;
$（'div'）。text（'Finish JQ'）;
}）;
}）;
< / script>
< / head>
< body>
< div id =msg>未开始< / div>
< button> jQuery< / button>
< a href =＃onclick =doRun（）> javascript< / a>
< / body>
< / html>
将其设置为处理，然后执行setTimeout以防止cpu密集型任务从运行到div更新后。
<！DOCTYPE html>
< html>
< head>
< script type =text / javascriptsrc =http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js>< / script>
< script>
函数addSecs（d，s）{return new Date（d.valueOf（）+ s * 1000）;}
函数doRun（）{
document.getElementById（'msg'）。 innerHTML ='处理JS ...';
setTimeout（function（）{
start = new Date（）;
end = addSecs（start，5）;
do {start = new Date（）;} while end起始> 0）;
document.getElementById（'msg'）。innerHTML ='完成处理';
}，10）;
}
$（function（）{
$（'button'）。点击（doRun）;
}）;
< / script>
< / head>
< body>
< div id =msg>未开始< / div>
< button> jQuery< / button>
< a href =＃onclick =doRun（）> javascript< / a>
< / body>
< / html>
您可以根据需要修改setTimeout延迟，较慢的机器/浏览器可能需要更大。
编辑：
您还可以使用警报或确认对话框来允许页面更新时间。
document.getElementById（'msg'）。innerHTML ='处理JS ...';
如果（confirm（这个任务可能需要几秒钟，你想继续吗？））{
//在这里运行代码
}
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.
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.
Even when bypassing jQuery and using basic raw Javascript, I see the same issue.
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.
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>
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>
you can modify the setTimeout delay as needed, it may need to be larger for slower machines/browsers.
Edit:
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屋！
