Question

我在firefox上测试了这段代码，它只能达到＆＃34; pat2＆＃34;。 IE是一样的。在Chrome中，它可以正常运行并无限期运行。

为什么会出现这种情况是否明显？ Firebug没有显示任何错误，并且加载图标一直显示它正在处理某些事情。

<script type="text/javascript">
i = 1
function writeurl(){
document.write("pat"+i+"<br>")
i+=1
setTimeout(writeurl,1000)
}
writeurl()
</script>

如果它只运行一次，也许我可以把它归咎于我做错了什么，但它运行了两次然后＃34;停止＆＃34;没有错误。

也可能有助于知道以下工作正常并且它一直运行直到callstack溢出。 ;）

<script type="text/javascript">
i = 1
function writeurl(){
document.write("pat"+i+"<br>")
i+=1
writeurl()
}
writeurl()
</script>

Answer 1

这里的问题实际上是document.write来电而不是setTimeout来电。如果您使用console.log(i)，您会看到代码在IE，Firefox，Chrome中有效。您可以在开发人员工具控制台中检查日志输出（请参阅here）例如：

<script type="text/javascript">
  var i = 1;
  function writeurl(){
    console.log(i);
    i+=1
    setTimeout(writeurl, 1000);
  }
  writeurl();
</script>

问题是加载文档后，document.write会覆盖内容（有关详情，请参阅this question）。

不要使用document.write，请尝试使用以下内容：

var i = 1;
function writeurl(){
  var div =  document.createElement("div");
  var text = document.createTextNode("pat " + i);
  div.appendChild(text);
  document.body.appendChild(div);
  i+=1;
  setTimeout(writeurl,1000);
}
writeurl();

在codepen上的

Here's an example。您还可以使用JQuery使此代码更简洁。我在codepen中添加了一个使用JQuery的例子。

递归setTimeout只运行两次

1 个答案: