Question

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

Answer 1

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，该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()内定义：我们不需要全局变量

Answer 2

尝试

document.getElementById('result').innerHTML += inc;

Answer 3

var i = 0;

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

launch();

JavaScript的。在循环执行期间，innerHTML的循环不会更新

3 个答案: