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 は基本的にこれを行う 2 つの方法を提供します: 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 に答える