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。

这是一个可能的解决方案，它使用 setTimeout 来避免在计算期间阻塞 DOM 重绘。

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 回答