Question

有人知道，在我显示HTML页面之后，我是否可以访问特定的ID（getElementById），并将其更改几次？

我想根据程序的进度向客户端提供一些字符串并多次更改，但我不能，它最近才写给我。

例如：

<script type="text/javascript">
  function foo(){
   for(var i = 0; i<10000; i++){
     document.getElementById('myTag').innerHTML = i;
   }
  }
</script>

在这种情况下，我没有看到数字运行。我只看到最后一个。

如果我在循环中放置警报 - 值会更改。

Answer 1

据我了解你的问题，你想要一个从0到10000的计数？你想在屏幕上看到进展吗？你可以这样做：

http://jsfiddle.net/camus/ayJFM/

var interval = 500;//milliseconds
var foo = (function () {
    var i = 0;
    var func = function () {

        if (i < 10000) {
            document.getElementById("myTag").innerHTML = i;
            i += 1;
            setTimeout(func, interval);
        }
    };
    return func;
})();

setTimeout(foo, interval);

Answer 2

你快到了。你唯一错的就是替换innerHTML内容而不是添加内容。改变这个：

document.getElementById('myTag').innerHTML = i;

到此：

document.getElementById('myTag').innerHTML += i;

补充/替代答案：

等待。我刚刚重读了你的问题，并意识到还有另一种解释方法。你问它的方式很模糊，所以我按原样留下上面的答案。

在处理for循环时没有看到“正在运行的数字”的原因是因为你误解了javascript在浏览器中的工作方式。

浏览器的事件循环运行如下：

1. Fetch content
2. Run javscript
3. Render content
then repeat forever

这是javascript的工作原理。所以像你一样运行一个简单的for循环。浏览器执行脚本，直到没有其他内容要执行（步骤2）。一旦javascript完成执行，它将启动渲染过程（步骤3）。显然，到目前为止i的值是最终值，因此您只能看到最终值。

浏览器从不中断运行javascript来呈现/更新页面。那么，人们如何实施倒计时器等？他们通过安排一段javascript在事件循环的下一次迭代中执行来实现。也就是说，让浏览器进入步骤3并在适当的时刻再次进入步骤2，然后运行他们想要的脚本。

Javascript基本上提供了两种方法：setTimeout和setInterval。

setTimeout的工作原理如下：

step 1. nothing to do
step 2. setTimeout schedules a piece of javascript to run at a later time
        Note that the javascript does not execute yet until setTimeout
        expires.
step 3. let the browser update the page
many, many loops of steps 1-3
step 2 (some time later).
        setTimeout expires and the piece of javascript executes
step 3. let the browser update the page

所以，得到你想要的效果，你需要这样做：

function foo(){
  var i = 0;
  var update = function(){
    document.getElementById('myTag').innerHTML = i;
    i++;
    if (i<10000) {
      setTimeout(update,100);
    }
  };
  update();
}

在HTML上将Multiple写入相同的ID

2 个答案: