JavaScript。ループ実行中にinnerHTMLを含むループが更新されない

私は各ループで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>
ベストアンサー

JavaScriptの実行とページのレンダリングは同じ実行スレッドで実行されます。つまり、コードの実行中にブラウザはページを再描画しません。
(たとえそれがforループの繰り返しごとにページを再描画していたとしても、すべてが速くて個々の数字を見る時間が本当にないでしょう)。

その代わりに、 setTimeout()または
setInterval()関数( window
オブジェクトの両方のメソッド)を使用します。最初の設定では、設定されたミリ秒後に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);
}

setTimeout()を使用して、
timeoutLoop()種類のコールをそれ自体
これは非常に一般的な手法です。

clearTimeout()で使用できるように設定されているタイマーへの参照であるIDを返す
setTimeout()
setInterval()まだ実行されていないキューに登録されている実行をキャンセルするには、code>および
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()内で定義できるクロージャの魔法のおかげで>:グローバル変数は必要ありません。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です