以时间间隔显示循环数据答案

【问题标题】：Display for loop data with time interval以时间间隔显示循环数据
【发布时间】：2018-08-30 11:31:49
【问题描述】：

我想显示从 1 到 100 的数字，但在显示数字时会有某种延迟。目前它只显示 for 循环中的最后一个数字，有没有一种不太高级的方法来做到这一点。

    <!DOCTYPE html>
    <html>
        <head>
            <link rel="stylesheet" type="text/css" href="random.css">
            <title></title>
        </head>
        <body>
            <div id="freeRange">1</div>


            <script type="text/javascript" src="random.js"></script>
        </body>
    </html>

这里是 Javascript 代码

    for(var i = 1; i <= 100; i++){
        document.getElementById('freeRange').innerHTML = i;
    }

【问题讨论】：

标签： javascript loops innerhtml

【解决方案1】：

您可以简单地使用setInterval() 来实现：

在这里，您可以跟踪显示的数字，并每秒递增该数字。

let div = document.getElementById('freeRange');
let count = 1; //Keep track of your displayed number

let interval = setInterval(() => {
  div.innerHTML = count; //Replaces your displayed number
  count++; //Increment your variable
  
  if(count > 100) clearInterval(interval); //Stop the interval when you reach 100
},1000); //TIme to wait between every change, in millis

&lt;div id="freeRange"&gt;0&lt;/div&gt;

【讨论】：

这很有帮助，我现在会更多地使用 setInterval()。

【解决方案2】：

你每次都需要 appendChild，而不仅仅是重写同一个元素的内容。

for(var i = 1; i <= 100; i++){
  var p = document.getElementById('freeRange');
  var d = document.createElement('DIV')
  d.innerText = i;
  p.appendChild(d)
}

【讨论】：

这每次都会打印一个新数字，我想一个接一个地显示。

【解决方案3】：

 <div id="freeRange">1</div>

var myVar = setInterval(myTimer, 1000);

    function myTimer() {
        var d = parseInt(document.getElementById("freeRange").innerHTML);
        document.getElementById("freeRange").innerHTML = d+1;
    }

【讨论】：

demo #id 指的是什么？
虽然此代码可能会回答问题，但提供有关此代码为何和/或如何回答问题的额外上下文可提高其长期价值。
更改后效果很好。我认为这适用于 clearInterval()。谢谢，很有帮助。