JavaScript。在循环执行期间，带有 innerHTML 的循环未更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8110905/
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
JavaScript. a loop with innerHTML is not updating during loop execution
提问by user763308
I'm trying to refresh a div from Javascript at each loop and see 1, 2, 3, .... The following code works, but only displays the final result (9998). How is it possible to display all the steps? Thank you in advance.
我试图在每个循环中从 Javascript 刷新一个 div 并查看 1, 2, 3, .... 下面的代码有效，但只显示最终结果 (9998)。如何显示所有步骤？先感谢您。
<html>
<head>
</head>
<body>
<div id="cadre" style="width=100%;height=100%;">
<input type="button" value="Executer" onclick="launch();"/>
<div id="result" ></div>
</div>
<script type="text/javascript">
function launch(){
for (inc=0;inc<9999;inc++){
document.getElementById('result').innerHTML = inc;
}
}
</script>
</body>
</html>
采纳答案by vdegenne
var i = 0;
function launch(){
var timer = window.setInterval(function(){
if( i == 9999 ){
window.clearInterval( timer );
}
document.getElementById('result').innerHTML = i++;
}, 100);
}
launch();
回答by nnnnnn
JavaScript execution and page rendering are done in the same execution thread, which means that while your code is executing the browser will not be redrawing the page. (Though even if it was redrawing the page with each iteration of the for loop it would all be so fast that you wouldn't really have time to see the individual numbers.)
JavaScript 执行和页面渲染在同一个执行线程中完成，这意味着当你的代码正在执行时，浏览器不会重绘页面。（尽管即使它在 for 循环的每次迭代中重新绘制页面，它也会如此之快，以至于您真的没有时间查看各个数字。）
What you want to do instead is use the setTimeout()or setInterval()functions (both methods of the windowobject). The first allows you to specify a function that will be executed once after a set number of milliseconds; the second allows you to specify a function that will be executed repeatedly at the interval specified. Using these, there will be "spaces" in between your code execution in which the browser will get a chance to redraw the page.
你想要做的是使用setTimeout()orsetInterval()函数（window对象的两种方法）。第一个允许您指定一个将在设定的毫秒数后执行一次的函数；第二个允许您指定一个函数，该函数将在指定的时间间隔内重复执行。使用这些，您的代码执行之间将有“空间”，浏览器将有机会重绘页面。
So, try this:
所以，试试这个：
function launch() {
var inc = 0,
max = 9999;
delay = 100; // 100 milliseconds
function timeoutLoop() {
document.getElementById('result').innerHTML = inc;
if (++inc < max)
setTimeout(timeoutLoop, delay);
}
setTimeout(timeoutLoop, delay);
}
Notice that the function timeoutLoop()kind of calls itselfvia setTimeout()- this is a very common technique.
请注意，该函数通过timeoutLoop()调用自身setTimeout()- 这是一种非常常见的技术。
Both setTimeout()and setInterval()return an ID that is essentially a reference to the timer that has been set which you can use with clearTimeout()and clearInterval()to cancel any queued execution that hasn't happened yet, so another way to implement your function is as follows:
双方setTimeout()并setInterval()返回一个ID，它是从根本上已设置，您可以与使用计时器参考clearTimeout()，并clearInterval()取消所有排队的执行是还没有发生，所以另一种方式来实现你的功能如下：
function launch() {
var inc = 0,
max = 9999;
delay = 100; // 100 milliseconds
var iID = setInterval(function() {
document.getElementById('result').innerHTML = inc;
if (++inc >= max)
clearInterval(iID);
},
delay);
}
Obviously you can vary the delayas required. And note that in both cases the incvariable needs to be defined outside the function being executed by the timer, but thanks to the magic of closures we can define that within launch(): we don't need global variables.
显然，您可以根据delay需要更改。请注意，在这两种情况下，inc变量都需要在定时器正在执行的函数之外定义，但是由于闭包的神奇，我们可以在内部定义它launch()：我们不需要全局变量。
回答by Nicola De Lazzari
Try
尝试
document.getElementById('result').innerHTML += inc;
