使用JavaScript递归setTimeout函数是否会引发Stack Overflow？栈增长原因解析

嘿，这俩问题问到点子上了，我给你掰扯清楚：

答案是完全不会，核心原因在于setTimeout的异步特性：

咱们先对比下普通递归和这种“递归式”setTimeout的区别：

• 普通递归是直接在当前函数执行过程中调用自身，比如：

function normalRecursion() {
  normalRecursion();
}

这种写法会不断把新的函数帧压入当前调用栈，直到栈容量耗尽，直接触发栈溢出。

• 而用setTimeout的“递归”，本质是异步调度：

function timeoutRecursion() {
  setTimeout(() => {
    timeoutRecursion();
  }, 100);
}

每次调用timeoutRecursion时，只是把回调函数扔进了浏览器的定时器任务队列，当前函数执行完就立刻退出调用栈了。等定时器时间到，回调函数才会被取出执行——这时候会开启一个全新的调用栈，和之前的栈没有任何关联。所以栈帧根本不会积累，自然不会有栈溢出的风险。

这其实是浏览器调试工具的**异步调用栈追踪（Async Stack Traces）**特性在搞鬼，并不是真的调用栈在无限积累：

举个实际的例子，你运行这段代码后看控制台的console.trace()输出：

function init() {
  startAsync();
}
function startAsync() {
  setTimeout(() => {
    console.trace("当前调用栈");
    startAsync();
  }, 100);
}
init();

你会发现每次打印的调用栈里，不仅有当前的setTimeout回调，还会追溯到最开始的init()和startAsync()。看起来像是栈在不断变长，但这只是浏览器帮你把异步任务的调用源头也串联展示出来了，方便你调试时追踪异步逻辑的发起路径。

真实的JS调用栈在每次执行setTimeout回调时，都是一个全新的独立栈，执行完就清空了，并没有真的堆积栈帧。

内容的提问来源于stack exchange，提问作者Mark