0

有人知道在我显示 HTML 页面后是否可以访问特定 ID (getElementById)，并多次更改它的值？

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

例如：

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

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

如果我将警报放入循环中 - 值会更改。

4

2 回答 2

2

据我了解您的问题，您想要从 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);
于 2013-01-27T14:40:06.303 回答
1

您快到了。您做错的唯一一件事是替换 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();
}
于 2013-01-27T14:29:24.883 回答