use*_*308 6 javascript innerhtml partial-page-refresh
我正在尝试在每个循环中刷新来自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>
nnn*_*nnn 19
JavaScript执行和页面呈现在同一个执行线程中完成,这意味着在您的代码执行时,浏览器不会重绘页面.(虽然即使它在for循环的每次迭代中重绘页面,它都会如此之快,以至于你没有时间看到各个数字.)
你想要做的是使用setTimeout()或setInterval()函数(window对象的两种方法).第一个允许您指定一个在设定的毫秒数后执行一次的函数; 第二个允许您指定将以指定的间隔重复执行的函数.使用这些,在代码执行之间会有"空格",浏览器将有机会重绘页面.
所以,试试这个:
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);
}
请注意,函数timeoutLoop()类型通过自身调用setTimeout()- 这是一种非常常见的技术.
双方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);
}
显然你可以根据delay需要改变.请注意,在这两种情况下,inc变量都需要在定时器执行的函数之外定义,但是由于闭包的神奇之处,我们可以在其中定义launch():我们不需要全局变量.
vde*_*nne -2
var i = 0;
function launch(){
var timer = window.setInterval(function(){
if( i == 9999 ){
window.clearInterval( timer );
}
document.getElementById('result').innerHTML = i++;
}, 100);
}
launch();