Question

以下代码等待2秒，然后打印一些hello世界。

<!DOCTYPE html>
<html>
<body onload="myTimedFunction()">

<script>
    function myTimedFunction() {
        setTimeout(function() { document.write("hello world");document.write(" hello world2");runMe();}, 2000); 
    }
    function runMe(){document.write(" hello world3");}
</script>
<br>
<p>This text will disappear when the script runs</p>

</body>
</html>

就像它在p标签中说的那样，文本在脚本运行后消失了。此外，当脚本运行时，网页显示“正在连接...”，旁边有一个加载符号;当我逃脱时，这消失了。为什么文本会消失？为什么javascript不会停止，直到我遇到逃生，丢失分号？我正在使用firefox，在Chrome中“连接...”永远不会出现，但文本仍然消失。谢谢你的阅读。

Answer 1

如果当前文档仍处于“打开”状态，即它仍在被解析，document.write将其参数字符串插入文档中的当前位置。但是，当页面完成解析时，就像它在onload之后（以及两秒超时）一样，它已经关闭; document.write会重新打开它，这会删除所有当前内容。

创建一个文本节点，然后将其附加到<body>！

function myTimedFunction() {
    setTimeout(function () {
        var textNode = document.createTextNode('hello world');

        document.body.appendChild(textNode);
    }, 2000); 
}

Answer 2

此问题与setTimeout无关。这通常在使用document.write时发生。

只需将document.write替换为：

document.querySelector('body>p').innerHTML += 'hello world';

如果你查一下，你会发现document.write被认为是一种不好的做法，请查看this post原因，但在你的情况下，主要原因是：

页面加载完成后执行的document.write将覆盖页面，或者写一个新页面，或者不能正常工作

Answer 3

您可以尝试以下代码：

<!DOCTYPE html>
<html>
<body onload="myTimedFunction()">


<br>
<p>This text will disappear when the script runs</p>

</body>
</html>

<script>
    function myTimedFunction() {
       setTimeout(function() { document.write(document.body.innerHTML+"hello world");document.write(" hello world2");runMe();}, 2000); 
    }
    function runMe(){document.write(" hello world3");}
</script>

奇怪的Javascript setTimeout行为

3 个答案: