为什么多个 setTimeouts 在 IE9 上只执行一次？答案

【问题标题】：Why do multiple setTimeouts only execute once on IE9?为什么多个 setTimeouts 在 IE9 上只执行一次？
【发布时间】：2013-01-31 07:44:33
【问题描述】：

我已经检查了有关此的其他条目，但似乎都不是我的问题。下面的 HTML 页面在 Chrome 上运行良好。有三行输出。

然而，在 IE9 上，只输出第一行。关于为什么会这样的任何想法？

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script>
        var process = (function () {

            var count = 0;    

            function _execute() {
                count++;
                document.write("Executed " + count + " time(s).<br\>");
            }

            return {
                add: function () {

                    setTimeout(_execute, 50);
                }
            };
        })();
    </script>
</head>
<body>
<script>
    process.add();
    process.add();
    process.add();
</script>

</body>
</html>

输出铬：

Executed 1 time(s).
Executed 2 time(s).
Executed 3 time(s).

输出 IE9：

Executed 1 time(s).

【问题讨论】：

预感：IE9 通过对函数对象的引用来键入计时器。尝试将每个调用包装在一个匿名函数中：setTimeout(function() {_execute()}, 50)
@Nevir 有趣的猜测；我想这是可能的。然而，这似乎是一个严重的错误。编辑 - 哦等等；我敢打赌这是document.write()。
尝试将document.write() 替换为console.log()。在文档关闭后调用document.write()（这里肯定会发生这种情况）会让整个事情一扫而光。
你是一个聪明的男人（或女人）尖尖的。问题是document.write()。我用页面上的 div 替换它并做了 innerHTML 的事情，现在它很漂亮。

标签： javascript internet-explorer-9 settimeout

【解决方案1】：

页面加载后不要使用 document.write！查看页面源。您会看到它替换了整个文档。

使用 appendChild 或 innerHTML 向页面添加新内容。如果您正在调试，请使用控制台。

    var process = (function () {

        var count = 0,
            outElem = document.getElementById("out");

        function _execute() {
            count++;
            var li = document.createElement("li");
            li.innerHTML = "Executed " + count + " time(s)";
            outElem.appendChild(li);
        }

        return {
            add: function () {

                setTimeout(_execute, 50);
            }
        };
    })();

running Example with appendChild

【讨论】：

document.write 只是为了测试我在做什么，它不是生产的东西。由于我正在测试它是异步的——这会导致问题。当使用另一种方法产生输出时，问题就解决了。