在网页上打印javascript的值

Printing a value from javascript on a web page

本文关键字：javascript 的值 打印 网页      更新时间：2023-09-26

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

编辑:张贴这里的代码修复这个问题，使用setTimeout @Alytrem的建议:

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

这是因为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>

文档。Write或alert()是我知道的输出javascript变量值用于调试和其他东西的唯一方法因此，例如:alert("j= "+j); <——更适合详细调试

或:document.write("<br/> j="+j); <——更适合快速调试

相关文章：