通过Javascript循环更改DOM元素的值

Question

以下代码在控制台中记录一个0到100的值，之间有1000ms的延迟。但是它不会按预期更新DOM元素div.innerHTML。如何通过JS循环延迟更改DOM元素值。看起来setTimeout无法循环工作。

HTML文件

<div id="output"></div>


<script>
var obj=document.getElementById("output");

for(var i=0;i<100;i++){
obj.innerHTML=i.toString();
(function(i){
    setTimeout(function(){
      console.log(i);
  }, 1000 * i)
 })(i);
}
</script>

Answer 1

您必须将innerHtml放在setTimeout内

var obj = document.getElementById('output');

for (var i = 0; i < 100; i++) {
  (function(i) {
    setTimeout(function() {
      obj.innerHTML = i.toString();
    }, 1000 * i)
  })(i);
}

<div id="output"></div>

---

您也可以使用setInterval

var obj = document.getElementById('output');

var i = 0;

var descriptor = setInterval(function() {
  obj.innerHTML = i.toString();

  i += 1;

  // When it changed the value 100 time, stop the loop
  if (i === 100) {
    clearInterval(descriptor);
  }
}, 1000)

<div id="output"></div>