JavaScript.带有innerHTML的循环在循环执行期间不会更新

JavaScript. a loop with innerHTML is not updating during loop execution

本文关键字：循环 更新 执行期 带有 innerHTML JavaScript      更新时间：2023-09-26

我试图刷新一个div从Javascript在每个循环，看到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>

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()中定义它:我们不需要全局变量。

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

Try

document.getElementById('result').innerHTML += inc;
相关文章：