Question

我有一个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>

Answer 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>

Answer 2

Document.write或alert（）是我知道为调试和输出输出javascript变量值的唯一方法所以，例如：alert("j= "+j);＆lt; - 更好地进行细节调试

或：document.write("<br/> j="+j);＆lt; - 更适合快速调试

从网页上的javascript打印值

2 个答案: