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

发布于 2024-12-15 08:50:42 字数 585 浏览 3 评论 0原文

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

原文

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.

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

昨迟人 2024-12-22 08:50:42

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() 一起使用code> 和 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() 中定义它>：我们不需要全局变量。

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.)

What you want to do instead is use the setTimeout() or setInterval() functions (both methods of the window object). 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.

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 itself via setTimeout() - this is a very common technique.

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:

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 delay as required. And note that in both cases the inc variable 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.

回复收藏 0 原文

美人如玉 2024-12-22 08:50:42

var i = 0;

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

launch();

var i = 0;

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

launch();

回复收藏 0 原文

梦里泪两行 2024-12-22 08:50:42

尝试

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

Try

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

回复收藏 0 原文

~没有更多了~

关于作者

深爱不及久伴

暂无简介

文章

26 人气

关注发私信

友情链接

文江博客

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

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

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（3）

关于作者

相关话题

热门标签

推荐作者

卷耳

佚名

℉服软

qq_2gSKZM

凉宸

gyhjy

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。