Question

我有一个函数，在完成后使用setTimeout（）重新排队。有人可以解释为什么Chrome DevTools让它看起来像是递归地调用自己吗？我的理解是调用堆栈应该在每次调用时都清楚。

举一个非常简单的例子：

<html>
  <head>
    <script>
      function main() {
        setTimeout(main, 100);  // set breakpoint here
      }
      main();
    </script>
  </head>
  <body></body>
</html>

断点第一次被击中时我看到了：

经过3次迭代后，我看到了这一点：

Firefox开发人员工具可以达到我的预期，并且每次遇到断点时都会在堆栈上显示该函数的一个实例。

在我不知道的Chrome下是否存在某种微妙的参考捕获，或者这只是DevTools UI的事情？

Answer 1

隐藏它 - 转到
开发工具设置 - ＆gt;偏好 - ＆gt;调试器
选中“禁用异步堆栈跟踪”
但我强烈建议保持原样。它对调试非常有用。

Answer 2

我只是花了两个小时来尝试调试未损坏的东西，因为我不了解@bsalex的答案中提到的Chrome Devtools中的disable async stack traces设置。

实施Ajax长轮询技术时，通常会在收到响应后再次调用轮询功能，以便可以等待服务器上的更多事件/通知。

某些人在延迟一段时间后使用window.setTimeout()函数来调用轮询函数。从逻辑上讲，该调用是递归的，但是调用堆栈不应随每个调用无限期地增长。 但是，Chrome显示异步堆栈跟踪的方式会欺骗您，使您认为调用堆栈正在增长。在我的案例中，我尝试了各种破解措施，试图修复代码以避免堆栈溢出。

结果证明代码没有问题，只是“ Chrome东西”，并且禁用异步堆栈跟踪可以清楚地表明堆栈的行为符合预期。在长时间投票的情况下遇到此问题的人知道发生了什么事。我通过谷歌搜索chrome xhr call stack keeps growing解决了这个问题。

为什么setTimeout（）在Chrome DevTools下混乱我的调用堆栈？

2 个答案: