9

我正在尝试在每个循环中从 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>
4

3 回答 3

25

JavaScript 执行和页面渲染在同一个执行线程中完成，这意味着当您的代码执行时，浏览器不会重绘页面。（尽管即使它在 for 循环的每次迭代中都重新绘制页面，它也会如此之快，以至于您真的没有时间查看各个数字。）

您想要做的是使用setTimeout()orsetInterval()函数（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，该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()：我们不需要全局变量。

于 2011-11-13T10:40:06.390 回答
-2 
var i = 0;

function launch(){
           var timer = window.setInterval(function(){
               if( i == 9999 ){
                   window.clearInterval( timer );
               }
               document.getElementById('result').innerHTML = i++;
           }, 100);
}

launch();
于 2011-11-13T10:27:21.930 回答
-3

尝试

document.getElementById('result').innerHTML += inc;
于 2012-07-12T13:32:30.490 回答