Question

我有这个示例代码：

<!DOCTYPE html>
<html>
  <head>
    <title></title>
    <meta charset="UTF-8">
  </head>
  <body>
    <script>
      var EventHandler = {};
      EventHandler.writeNumber = function(i){
        document.write(i);
      };      

      for(var i=0; i<100; i++) {
        (function(i) {
          window.setTimeout(function() {
            EventHandler.writeNumber(i);
          },100*i);
        }(i));
      }
    </script>
  </body>
</html>

代码每秒在页面上写一个数字。在Chrome 26和Safari 5中，它运行正常！在Firefox 18和IE10中，它只出现一次（文档上写着0）。

如果我将document.write更改为console.log，那么它适用于所有浏览器。那是为什么？

Answer 1

这是Chrome和Safari中的错误（或者更准确地说是在WebKit中）。当页面未处于解析中时，document.write意味着document.open，而document.open应清除每个规格的所有超时。这就是IE和Firefox所做的，但是WebKit对document.open的处理是各种各样的破坏。

Answer 2

document.write应该只在页面加载时工作一次。

从顶部到底部解析页面。解析时发现的每个JavaScript都会立即执行。当执行结束或被调度（setTimeout或任何其他异步内容）时，浏览器继续解析。

当您执行document.write("Test")时，解析器将在结束Test标记之后直接创建文本节点</script>，因为它当前正好在此位置。如果延迟时间为{1}} 1ms，则解析器将位于不同的位置，将文本节点插入页面的下方。

如果等待时间过长，解析器将完成解析页面并且不再接受写入。或者，在chrome的情况下，解析器尝试修复程序员的错误并保持对setTimeout标记位置的引用，使得在实际解析完成后仍然可以使用<script>。 / p>

使用控制台和Firebug（document.write）查看会发生什么。

一般来说F12是一种非常糟糕的做法。由于解析器必须为每种HTML元素解析给定的字符串，因此速度非常慢。请改用document.write或document.createTextNode。

window.setTimeout无法在Firefox 18和IE10中运行（Chrome和Safari工作）

2 个答案: