为什么我对dom的更改直到函数运行后才会显示
[英]why do my changes to the dom not show up until after function has run
问题描述
my eval() call is fairly intensive and takes about a second to generate each solution. 
我的eval()调用相当密集，需要大约一秒钟来生成每个解决方案。
Therefore it takes about a second to generate each paragraph element (which I then append to the dom - document.getElementById('project_euler_solutions').appendChild(p); ). 因此，生成每个段落元素需要大约一秒钟（然后我将其附加到dom - document.getElementById('project_euler_solutions').appendChild(p); ）。
Therefore I expected each paragraph to appear on the webpage about a second apart. 因此，我希望每个段落在网页上显示大约一秒钟。 (so after about 40 seconds I would have 40 paragraphs say). （所以大约40秒后我会有40段说）。
However, when I click the button, Nothing happens for 40 seconds, and then all the solutions appear at once. 但是，当我单击按钮时，40秒内没有任何操作，然后所有解决方案立即出现。
How come it waits for all of them to finish before it updates the dom? 为什么在更新dom之前等待所有人完成？
I thought each paragraph would appear as soon as it was appended to the 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>
2 个解决方案
解决方案1
5 已采纳 2012-06-06 04:02:05
Javascript在与UI相同的线程中运行，因此您需要为DOM提供控制权以重新绘制所有更改。
解决方案2
1 2012-06-06 04:05:00
Force a reflow: 强制回流：
$(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
}
}
});
});
You can also setTimeout between the drawings: 您还可以在图纸之间设置SetTime：
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)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.