0

HTML ページがあり、Java スクリプト関数からいくつかの値を出力したいと考えています。値は頻繁に変更する必要があります。私の問題は、「継続的に」変更するのではなく (または、少なくともコードで値の変更が必要な場合)、Java スクリプト コード全体の実行が終了したときにのみ変更されることです。Chrome を使用していますが、別のブラウザーではテストしていません。

問題を再現する最小限の例を次に示します。

<head>
   <title>Test Continuous Output</title>
</head>

<body>
   <p id="data"></p>

   <script>
      function onClick() {
          for(var i =0;i<100;i++) {
              document.getElementById("data").innerHTML = i;
              for(var j = 0; j < 1000; j++) {
                    console.log("j="+j);
              }
          }
      }
   </script>
   <button onclick = "onClick()">test</button>
</body>

編集: @Alytrem の提案の下で setTimeout を使用して、この問題を修正するコードをここに投稿します。

<head>
   <title>Test Continuous Output</title>
</head>

<body>
  <p id="data"></p>

  <script>
    var n=0;
    function log() {
    document.getElementById("data").innerHTML = n;
    n=n+1;
    if(n<100) {
    setTimeout(log,100);
    }
    }

    function onClick() {
    log();
    }
  </script>
  <button onclick = "onClick()">test</button>
</body>
4

2 に答える 2

1

これは、DOM が変更されますが、再描画する必要があるためです。そして、dom が再描画されると、ループはすでに終了しています。たとえば、タイムアウトを 100 ミリ秒ごとにループするように設定してみてください。DOM を再描画できるようになります。

これは、コンピューティング中に DOM の再描画がブロックされるのを回避するために setTimeout を使用する解決策です。

http://jsfiddle.net/n4YYX/4/

<body>
<p id="data"></p>
<script>
    var remainingTasks;

    function doTask() {
        for (var j = 0; j < 1000; j++) {
            1 + 1;
        }
        console.log("remainingTasks=" + remainingTasks);
        document.getElementById("data").innerHTML = 100 - remainingTasks;
        remainingTasks--;
        if (remainingTasks > 0) setTimeout(doTask, 10);
    }

    function onClick() {
        remainingTasks = 100;
        doTask()
    }
</script>
<button onclick="onClick()">test</button>

于 2013-04-09T12:21:22.697 に答える
-1

Document.write または alert() は、デバッグなどのために javascript 変数の値を出力する方法として私が知っている唯一の方法ですalert("j= "+j);

または: document.write("<br/> j="+j);<-- 高速デバッグに適しています

于 2013-04-09T12:22:04.483 に答える