JavaScript for循环嵌套setTimeout延迟与预期不符问题咨询

• 首先要明确：setTimeout的延迟计时是从调用setTimeout的那一刻开始计算，而非等上一个setTimeout回调执行完成后才开始计算下一个的延迟。
• 你编写的for循环是同步执行代码，从i=0到i=10的11次迭代会在几毫秒内全部执行完毕，等于几乎在同一时间点注册了11个定时器，所有定时器的计时起点完全一致。
• 按照你给出的代码逻辑，各个定时器的触发时间（相对于循环执行的时间点）分别为：
  • x=0：1000ms → 1s时输出0
  • x=1：1000 + 3000 * 1 = 4000ms → 4s时输出1
  • x=2：1000 + 3000 * 2 = 7000ms →7s时输出2
  • 后续数值以此类推
• 如果你观测到x=2在4s就输出，大概率是以下几种情况之一：
  1. 混淆了时间计算的起点：如果从x=1输出的4s时刻开始计时，到x=2输出的7s时刻间隔为3s，误把这个间隔时长当成总运行时长的话，就会产生输出过早的错觉。
  2. 运行环境的定时器优化：如果代码运行在未激活的浏览器标签页、或者负载极高的Node.js进程中，运行时会为了降低功耗合并触发时间接近的定时器，可能出现低优先级定时器提前/延后触发的偏差。
  3. 实际运行代码的参数错误：可以排查下实际执行的代码是否正确写了1000 + (3000 * x)，如果漏写了* x，所有定时器的延迟都是4000ms，会在4s时一次性输出所有x值，完全符合你描述的异常现象。

如果你想要的效果是每间隔3s输出一个数字，也就是上一个输出完成后再过3s输出下一个，可以改用递归调用setTimeout的方式实现，示例代码如下：

let x = 0;
function printNum() {
  console.log(x);
  x++;
  if(x <= 10) {
    setTimeout(printNum, 3000);
  }
}
// 首次延迟1s执行
setTimeout(printNum, 1000);

这种写法的定时器是在上一个回调执行完成后才注册下一个，计时起点是上一个回调执行的时刻，就能保证两次输出的间隔稳定在3s。

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