9

各ループで Javascript から div を更新して、1、2、3、... を表示しようとしています。次のコードは機能しますが、最終結果 (9998) しか表示されません。すべてのステップを表示するにはどうすればよいですか? 前もって感謝します。

<html>
<head>
</head>
<body>

<div id="cadre" style="width=100%;height=100%;">
    <input type="button" value="Executer" onclick="launch();"/>
    <div id="result" ></div>
</div>

<script type="text/javascript">
     function launch(){
        for (inc=0;inc<9999;inc++){
            document.getElementById('result').innerHTML = inc;
        }
     }
</script>

</body>
</html>
4

3 に答える 3

25

JavaScript の実行とページのレンダリングは同じ実行スレッドで行われます。つまり、コードが実行されている間、ブラウザーはページを再描画しません。(ただし、for ループの反復ごとにページを再描画していたとしても、すべてが非常に高速であるため、個々の数値を実際に確認する時間はありません。)

代わりに、setTimeout()またはsetInterval()関数 (windowオブジェクトの両方のメソッド) を使用します。1 つ目は、設定されたミリ秒後に 1 回実行される関数を指定できます。2 つ目は、指定された間隔で繰り返し実行される関数を指定できます。これらを使用すると、ブラウザがページを再描画する機会を得るコード実行の間に「スペース」ができます。

だから、これを試してください：

function launch() {
   var inc = 0,
       max = 9999;
       delay = 100; // 100 milliseconds

   function timeoutLoop() {
      document.getElementById('result').innerHTML = inc;
      if (++inc < max)
         setTimeout(timeoutLoop, delay);
   }

   setTimeout(timeoutLoop, delay);
}

関数は自分自身を経由してtimeoutLoop()呼び出していることに注意してください。これは非常に一般的な手法です。setTimeout()

setTimeout()とはsetInterval()基本的に設定されたタイマーへの参照である ID を返します。この ID を使用してclearTimeout()、clearInterval()まだ発生していないキューに入れられた実行をキャンセルすることができます。したがって、関数を実装する別の方法は次のとおりです。

function launch() {
   var inc = 0,
       max = 9999;
       delay = 100; // 100 milliseconds

   var iID = setInterval(function() {
                            document.getElementById('result').innerHTML = inc;
                            if (++inc >= max)
                               clearInterval(iID);
                         },
                         delay);
}

もちろん、必要に応じて変更できますdelay。どちらの場合もinc、タイマーによって実行される関数の外で変数を定義する必要があることに注意してくださいlaunch()。

于 2011-11-13T10:40:06.390 に答える
-2 
var i = 0;

function launch(){
           var timer = window.setInterval(function(){
               if( i == 9999 ){
                   window.clearInterval( timer );
               }
               document.getElementById('result').innerHTML = i++;
           }, 100);
}

launch();
于 2011-11-13T10:27:21.930 に答える
-3

試す

document.getElementById('result').innerHTML += inc;
于 2012-07-12T13:32:30.490 に答える