javascript - 为什么显示结果出乎意料？

Question

function init(n) {
 console.log(n);
 setInterval(init.bind(this, ++n), 1000);
}

// init(0); // Works bad


function init2(n) {
 setInterval(function() {
 console.log(n++);
 }, 1000);
}

init2(0); // Works fine

第一个是递归函数，带有setInterval。

为什么第一个函数没有像“预期的”那样工作？对于“预期”，我的意思是每 1 秒显示一次 n + 1

听说是因为调用自身，调用越来越多，内存溢出。

这个我注意到了，但是我无法想象这个，谁能给我解释一下更详细的？我的问题是，我认为，当每 1 秒执行一次函数时，我向自己保证会发生这种情况，但没有。调用倍增，不要等待 1000 毫秒。

我对流程的心理印象是:

1 - Call init ()

2 - Show n and then add 1 to n

3 - With a setInterval, execute the init () function only if 1000 ms have 
passed.

4- 1 second passed ..

5- We return to step 1

Answer 1

1. 手动调用init()。该函数启动一个每秒触发一次的间隔。
2. 一秒后，间隔第一次触发并调用 init() 开始另一个间隔。
3. 两秒后(从开始算起)两个间隔触发并调用 init()。两个函数调用都开始一个新的间隔。现在总共有 4 个间隔。
4. 三秒后，4 个间隔触发，每个开始一个新的间隔。现在总共有 8 个间隔。

依此类推，直到资源用完。

在 init2() 中，这不会发生，因为间隔不会再次调用该函数，因此只会运行一个间隔。