Javascript 为什么我对dom的更改在函数运行后才会显示
我的Javascript 为什么我对dom的更改在函数运行后才会显示,javascript,jquery,dom,Javascript,Jquery,Dom,我的eval（） 因此，生成每个段落元素（然后将其附加到dom-document.getElementById（'project\u euler\u solutions'）.appendChild（p）；）大约需要一秒钟的时间 因此，我希望每个段落在网页上间隔大约一秒钟。（因此，大约40秒后，我会有40段话要说） 但是，当我单击按钮时，40秒钟内什么也没有发生，然后所有解决方案立即出现 为什么在更新dom之前，它会等待它们全部完成？ 我以为每个段落一被添加到dom中就会出现 <!DOCTY
eval（）
因此，生成每个段落元素（然后将其附加到dom-document.getElementById（'project\u euler\u solutions'）.appendChild（p）；
）大约需要一秒钟的时间
因此，我希望每个段落在网页上间隔大约一秒钟。（因此，大约40秒后，我会有40段话要说）
但是，当我单击按钮时，40秒钟内什么也没有发生，然后所有解决方案立即出现
为什么在更新dom之前，它会等待它们全部完成？
我以为每个段落一被添加到dom中就会出现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js"></script>
<script src="/statics/project_euler.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
for (var i in window) {
if (i.slice(0,5) == "solve") {
var p = document.createElement('p');
p.innerHTML = "running: " + i;
document.getElementById('project_euler_solutions').appendChild(p);
var p = document.createElement('p');
p.innerHTML = "Solution: " + eval(i + "()");
document.getElementById('project_euler_solutions').appendChild(p);
}
}
});
});
</script>
</head>
<body>
<div id="project_euler_solutions"><button>Calculate solutions</button></button></div>
</body>
</html>
$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
用于（窗口中的变量i）{
如果（即切片（0,5）=“求解”）{
var p=document.createElement（'p'）；
p、 innerHTML=“正在运行：”+i；
document.getElementById（'project\u euler\u solutions'）.appendChild（p）；
var p=document.createElement（'p'）；
p、 innerHTML=“解决方案：”+eval（i+“（）”）；
document.getElementById（'project\u euler\u solutions'）.appendChild（p）；
}
}
});
});
计算解
Javascript与UI在同一线程中运行，因此您需要将控制权交还给DOM以重新绘制所有更改。强制回流：
$(document).ready(function(){
$("button").click(function(){
for (var i in window) {
if (i.slice(0,5) == "solve") {
var p = document.createElement('p');
p.innerHTML = "running: " + i;
document.getElementById('project_euler_solutions').appendChild(p);
var p = document.createElement('p');
p.innerHTML = "Solution: " + eval(i + "()");
document.getElementById('project_euler_solutions').appendChild(p);
document.getElementById('project_euler_solutions').offsetHeight; //Force a reflow
}
}
});
});
还可以设置图形之间的超时：
var keys = Object.keys(window).filter(function(i){
return i.slice(0,5) === "solve";
});
(function (i){
(function k(){
var p = document.createElement('p');
p.innerHTML = "running: " + keys[i];
document.getElementById('project_euler_solutions').appendChild(p);
var p = document.createElement('p');
p.innerHTML = "Solution: " + eval(keys[i] + "()");
document.getElementById('project_euler_solutions').appendChild(p);
if( i++ < keys.length - 1 ) {
setTimeout(k, 0);
}
})()
})(0)
var-keys=Object.keys（窗口）.filter（函数（i）{
返回i.slice（0,5）=“求解”；
});
（职能（一）{
（职能k（）{
var p=document.createElement（'p'）；
p、 innerHTML=“正在运行：”+键[i]；
document.getElementById（'project\u euler\u solutions'）.appendChild（p）；
var p=document.createElement（'p'）；
p、 innerHTML=“解决方案：”+eval（键[i]+“（）”）；
document.getElementById（'project\u euler\u solutions'）.appendChild（p）；
if（i++
我添加了一行“document.getElementById（'project\u euler\u solutions'）.offsetHeight；”但它似乎没有任何效果？@robertking我想你必须设置循环之间的超时，我将为此添加代码谢谢，我将keys.length更改为keys.length-1，它工作得很好。还有，.filter（）在我的手机浏览器上是不可用的，所以我不得不修改这段代码。这很有意义。。您建议我如何将控制权交还给DOM？我发现这篇帖子（）建议使用setTimeOut（）@robert king:yep，setTimeOut
是一种常见的做法。因此，您将大任务拆分为较小的任务，每个任务都以延迟方式运行下一个任务