javascript - SetInterval 函数中的这个递归调用是如何工作的？

Question

以下代码是我正在参加的在线类(class)的作者发布的挑战的解决方案。目标是以 5 条消息为一组连续打印消息“Hello World”(以及延迟时间)，每组延迟增加 100 毫秒。他发布了一个 explanation for this solution (参见 Timers Challenge #4)在一篇 Medium 文章中，但它读起来更像是一种方法而不是解释。

我已经能够在其他练习和程序中成功地使用递归，但也许是因为我从未在 setInterval 方法的上下文中使用过，所以我只是不明白它在这种情况下是如何工作的。

(因为这会无限期地重复，所以我不会将其作为可运行的片段发布。)

let lastIntervalId, counter = 5;

const greeting = delay => {
  if (counter === 5) {
    clearInterval(lastIntervalId);
    lastIntervalId = setInterval(() => {
      console.log('Hello World. ' + delay);
      greeting(delay + 100);
    }, delay);
    counter = 0;
  }

  counter += 1;
};

greeting(100);

我阅读了他在 Medium 上的整篇文章，还重新阅读了几篇关于递归的文章，但我找不到任何真正适用于在 JavaScript 计时器中使用递归的文章。

在我看来，如果日志消息以 5 组重复，则对 greeting(delay + 100) 的递归调用也将被调用 5 次，并且对于其中的每一个将进行另外 5 次递归调用，依此类推。

如果有人能逐步向我解释这个过程实际上是如何进行的，我将不胜感激。

Answer 1

你不会得到爆炸性的指数增长，因为一个 setInterval 永远不会在不停止旧的的情况下创建。 setInterval() 前面总是有 clearInterval(lastIntervalId)。

即使 setInterval 函数在每次触发时都会调用 greeting，大多数调用都会跳过 if 并只是增加 计数器 和控制台日志。这就是创造五人一组行为的原因。

每第 5 次取消旧间隔并启动具有新延迟的新间隔并重置计数器。所有其他时间计数器只会增加。