JavaScript for 循环超时答案

【问题标题】：JavaScript for Loop timeoutJavaScript for 循环超时
【发布时间】：2021-11-03 12:10:56
【问题描述】：

我看到了这个循环，但我不明白在第二个循环之后（当 I = 2 时）超时仍然是 4 秒而不是 7 秒。

第一个循环，i = 0，x = 0，1 秒后输出为 0 - 我明白为什么
第二个循环，i = 1，x = 1，4 秒后输出为 1 - 我明白为什么 3000 X 1 + 1000 = 4000（4 秒）
第三个循环，i = 2，x = 2，4 秒后输出为 2 - 为什么是 4 秒而不是 7？ 3000 X 2 + 1000 是 7000（7 秒），但为什么我在 4 秒后得到输出，而不是 7 秒？

for (var i = 0; i <= 10; i++) {
  (function(x) {
    setTimeout(function() {
      console.log(x);
    }, 1000 + (3000 * x));
  })(i);
}

【问题讨论】：

我每 3 秒查看一次控制台日志，从单击按钮后 1 秒开始...
@Cerbrus 这里也一样。代码似乎按预期运行，所有输出的间隔为 3 秒，偏移量均为 1 秒。
但是在第三个循环之后应该是 7 秒，不是吗？第三个循环， i = 2 ， x = 2 ， 4 秒后输出为 2 - 为什么是 4 秒而不是 7 ？ 3000 X 2 + 1000 是 7000 ( 7 sec ) 但为什么我在 4 sec 而不是 7 后得到输出？
@AngusYoungus 距离开始 7 秒。不是来自上一次迭代。一个是距离开始 1 秒，一个是距离开始 4 秒，一个是距离开始 7 秒。它们之间有 4 秒。
@Ivar：它们之间有 3 秒。但除此之外，正确的，所有超时都在同一时刻开始。他们不会在前一个完成后开始。

标签： javascript for-loop timeout

【解决方案1】：

第三次迭代有 7 秒的延迟，但从脚本开始开始，而不是从第二次迭代开始。这是因为 javascript 的异步特性。所有超时将同时开始，每个控制台输出将在前一个输出后 3 秒发生。

查看 javascript 事件循环以获取更多信息。例如，在我看来，这个video 很好地解释了这个话题。

【讨论】：

【解决方案2】：

i, x = 2 的超时时间为 7 秒。这就是为什么它在 i, x = 1 触发后 3 秒发生。当前一个定时器触发时，这个函数不会注册下一个定时器，它在被调用的几毫秒内注册所有 10，它们在 4、7、10、13、16、19、22、25、28 时关闭，和 31 秒。

然而，这一次在每一次之间会有更长的延迟。关键是注册下一个计时器，因为当前计时器正在触发，而不是一次全部 10 个。

function timeRecurse (i=0) {
    var next = () => timeRecurse(i +1)
    console.log(i);
    return (i < 10) ? setTimeout(next, 1000 + (3000 * i)): null;
}

timeRecurse();

【讨论】：

如何更改循环和函数，使其每次比预览多等待 3 秒，例如在 1 秒后首先输出，然后在 4 秒后输出，然后在 7 秒后、10 秒后 ....跨度>

【解决方案3】：

目前的执行计划如下：

如您所见，所有的执行都是相对于起点（几乎）。

如果您希望一个接一个地执行（1 秒后为 0，5 秒后为 1，12 秒后为 2），请执行以下操作：

function compoundedInterval(x, limit) {
    if (x > limit) {
        return;
    }
    
    setTimeout(function() {
        console.log(new Date(), x);

        compoundedInterval(x + 1);
    }, 1000 + (3000 * x));
}

compoundedInterval(0, 10);

我已更新 console.log 以添加时间，以便我们查看执行之间的实际间隔。

我现在有 ff。结果：

【讨论】：