为何在Chrome DevTools中多次运行同一段setTimeout代码输出结果不同？

先看你运行的代码：

setTimeout(function() {
  console.log("A");
  setTimeout(function() {
    console.log("B");
  }, 100);
}, 200);

setTimeout(function() {
  console.log("C");
  setTimeout(function() {
    console.log("D");
  }, 200);
}, 100);

核心原因：定时器的非精确性 + 首次运行的环境开销 #

首先得明确一个关键点：JavaScript里的setTimeout并不是精确定时器，你传入的延迟值是最小等待时间，不是绝对时间。浏览器会把定时器回调放到任务队列中，只有当主线程空闲时才会取出执行，而且浏览器本身还有最小定时器间隔限制（通常为4ms，某些场景下会调整）。

第一次运行的情况：

第一次在DevTools中运行代码时，DevTools本身有不少初始化工作要做——比如控制台的首次渲染、上下文环境的初始化等，这些会占用主线程资源，导致定时器的实际触发时间出现偏差：

1. 外层的两个定时器：100ms的先到期，输出C，同时启动内部的200ms定时器（目标是再等200ms输出D）。
2. 再过100ms左右，200ms的外层定时器到期，输出A，同时启动内部的100ms定时器（目标是再等100ms输出B）。
3. 但因为首次运行的主线程忙碌，B的100ms定时器被推迟执行，反而让D的200ms定时器先到期，最终输出顺序变成C A D B。

第二次运行的情况：

清空控制台后再次运行时，DevTools的环境已经稳定，没有额外的初始化开销，主线程空闲时间更充足，定时器的执行更接近预期：

1. 同样先输出C，启动D的200ms定时器；之后输出A，启动B的100ms定时器。
2. 100ms的B定时器先到期，先输出B；接着D的200ms定时器到期，输出D，顺序就变成了C A B D。

简单来说，就是首次运行的环境开销打乱了定时器的预期执行顺序，而第二次运行时环境更稳定，定时器的执行更贴近你设置的延迟值。

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