为什么带有 setTimeout 的 function 不会导致堆栈溢出

Question

我正在编写一个处理大量数据的测试。 令我惊讶的是，如果我在我的 function 中添加了一个 setTimeout，它将不再导致堆栈溢出（对于这个站点来说多么合适）。 这怎么可能，代码似乎真的是递归的。 每个 setTimeout 调用是否都创建了自己的堆栈？

有没有办法在不增加所需的 memory 的情况下实现这种行为（异步并按顺序处理巨大的数组/数字）？

function loop(
    left: number,
    callbackFunction: (callback: () => void) => void,
) {
    if (left === 0) {
        return
    }
    console.log(left)
    callbackFunction(() => {
        loop(left - 1, callbackFunction)
    })
}

function setTimeoutCallback(callback: () => void) {
    setTimeout(
        () => {
            callback()
        },
        Math.random() * 5
    )
}

function nonSetTimeoutCallback(callback: () => void) {
    callback()
}

loop(100000, setTimeoutCallback) //no stack overflow

loop(100000, nonSetTimeoutCallback) //stack overflow

Answer 1

第一个不是递归的（尽管乍一看它看起来像）。

让我们简化并想象一个递归方法f ，我们将调用深度限制为 5。第二个示例是递归的，类似于

f(){ f(){ f(){ f(){ f(){ }}}}}

在另一个示例中，我们使用f作为回调创建 5 个超时（数组并不完全准确，它更像是一个具有随机超时值的优先级队列 - 但这种抽象有助于理解问题）

[f, f, f, f, f]

javascript 不是多线程的，因此所有 5 个函数一个接一个地调用。 最终，function 将创建另一个超时，当这种情况发生时，新的f回调被添加到列表（或队列）中。

所以基本上，超时在这里序列化递归。 请注意，在这种情况下， f将被调用近 200 万次，因为除了最后一个之外，所有的 f 都会将另一个f添加到 get 执行的列表中。

Answer 2

因为它不再是递归的。 至少在技术上不是。

源代码看起来确实是递归的，因此程序员可以编写这样的代码，就好像它是递归的，但从 CPU 的角度来看，它不再是递归的。 它在循环中按顺序处理。

递归和堆栈

递归 function 调用自身。 发生这种情况时，堆栈会不断增加，直到最后一个 function 返回。 直到 function 返回（让我们暂时忽略闭包）之前，函数的堆栈帧不会从堆栈中删除，因此因为递归 function 调用自身，它不会返回，直到对自身的调用返回。 这就是导致堆栈增长的原因。

尾递归

Lisp、Haskell 和 Scala 等语言认识到，在某些情况下，可以在执行递归时释放堆栈帧。 一般来说，如果递归调用是 function 中的最后一条指令，并且没有对返回值进行其他处理，则可以删除当前堆栈帧，因为在递归 function 返回后将不再使用它。 因此，此类语言实现了所谓的尾递归：在不增加堆栈的情况下无限递归的能力。

这对于非常纯粹的函数式语言特别有用，其中您拥有的唯一编程结构是函数，因为没有语句，您就不能有循环语句或条件语句等。尾递归使 Lisp 中的无限循环成为可能。

但是，Javascript 没有尾递归。 所以这不会影响递归在 Javascript 中的行为方式。 我提到这一点是为了注意并非所有递归都需要增加堆栈。

调度

诸如setTimeout()和setInterval()之类的定时器函数不会调用传递给它们的函数。 他们不仅不立即打电话给他们，而且根本不打电话给他们。 他们所做的只是将 function 以及何时应该调用 function 的信息传递给事件循环。

事件循环本质上是 javascript 的核心。 当且仅当没有更多 javascript 可以执行时，解释器才会进入事件循环。 您可以将事件循环视为解释器的空闲 state。 事件循环不断检查事件（I/O、UI、计时器等）并执行附加到事件的相关功能。 这是您传递给setTimeout()的 function 。

设置超时

因此，根据上面给出的事实，我们可以看到通过setTimeout进行的“递归”并不是真正的递归。

1. 首先，您的 function 调用setTimeout并将其自身传递给它。

2. setTimeout将 function 引用保存到事件侦听器列表并设置计时器以触发将触发 function 的事件

3. 您的 function 继续并返回，请注意“递归” function 尚未调用。 由于您的 function 返回它的堆栈帧从堆栈中删除。

4. Javascript 进入事件循环（没有更多的 javascript 需要处理）。

5. function 的计时器到期，事件循环调用它。 重复直到你停止调用setTimeout