Javascript 理解设置超时顺序

我仔细阅读了一组在线javascript面试问题，注意到以下问题：

function printing() {
  console.log(1); 
  setTimeout(function() { console.log(2); }, 1); 
  setTimeout(function() { console.log(3); }, 2); 
  setTimeout(function() { console.log(4); }, 0); 
  console.log(5);
}
printing();

我希望下面的代码将以下内容打印到控制台：1,5,4,3,2 我的原因是，当setTimeout被发送到eventloop时，console.log（1）和console.log（2）首先被执行，在那里它等待所有事情首先完成。打印出5后，JS将查看队列，然后4,3,2将推/弹出下一个队列

然而，在我的Chrome浏览器上，我注意到1,5,2,4,3出现了

我很困惑，但同时我有一种预感，这可能是由于超时延迟的小增量导致了打嗝（可能是浏览器的问题？）。我这样做的原因是因为我在每个数字上加了两个零，这样延迟就变成了100、200和0

---

有人能澄清引擎盖下发生了什么，以及我应该知道的关于延迟的任何问题吗？

这里我将给你一个执行过程的示例：

  console.log(1);                                   // Run log "1"
  setTimeout(function() { console.log(2); }, 1);    // Add to queue timer1
  setTimeout(function() { console.log(3); }, 2);    // Add to queue timer2 
  setTimeout(function() { console.log(4); }, 0);    // Add to queue timer3
  console.log(5);                                   // Run log "5"
  // In queue [timer1, timer2, timer3]

  // [tick timer 1 => 0 time left => execute] log "2"
  // [tick timer 2 => 1 time left]
  // [timer 3 => 0 time left => execute] log "4"
  // [tick timer 2 => 0 time left => execute] log "3"

---

功能上

setTimeout（…，0）

和

setTimeout（…，1）

的工作方式相同。当我们勾选“超时队列”中的每个计时器时，我们也会检查是否还有剩余时间。因此，

setTimeout（…，1）

将勾选并执行，

setTimeout（…，0）

将只执行。

这里我将给您一个执行过程的示例：

  console.log(1);                                   // Run log "1"
  setTimeout(function() { console.log(2); }, 1);    // Add to queue timer1
  setTimeout(function() { console.log(3); }, 2);    // Add to queue timer2 
  setTimeout(function() { console.log(4); }, 0);    // Add to queue timer3
  console.log(5);                                   // Run log "5"
  // In queue [timer1, timer2, timer3]

  // [tick timer 1 => 0 time left => execute] log "2"
  // [tick timer 2 => 1 time left]
  // [timer 3 => 0 time left => execute] log "4"
  // [tick timer 2 => 0 time left => execute] log "3"

---

功能上

setTimeout（…，0）

和

setTimeout（…，1）

的工作方式相同。当我们勾选“超时队列”中的每个计时器时，我们也会检查是否还有剩余时间。因此，

setTimeout（…，1）

将勾选并执行，

setTimeout（…，0）

将只执行。

您必须了解调用堆栈。所有函数调用都放在调用堆栈上，如果堆栈为空，则调用函数。如果堆栈具有条目，则在堆栈上的当前调用完成之前，不会调用该函数

超时在调用超时时将调用放置在调用堆栈上。它们以异步方式执行此操作。因此，可以在当前执行期间将调用放置在调用堆栈上

---

超时没有优先顺序，堆栈上的第一个是首先执行的。1毫秒超时超过了调用堆栈的0毫秒，因此首先执行。

您必须了解调用堆栈。所有函数调用都放在调用堆栈上，如果堆栈为空，则调用函数。如果堆栈具有条目，则在堆栈上的当前调用完成之前，不会调用该函数

超时在调用超时时将调用放置在调用堆栈上。它们以异步方式执行此操作。因此，可以在当前执行期间将调用放置在调用堆栈上

---

超时没有优先顺序，堆栈上的第一个是首先执行的。1毫秒超时超过了调用堆栈的0毫秒，因此首先执行。

非常确定超时的最小有效值为1，因此0被移动到1，因此在之后发生。不确定。无论如何，我不使用小于16ms（60Hz）的计时器，因为这是Windows上的默认计时器分辨率，我不想仅仅为了它而使用高分辨率计时器。我注意到以下链接，其中最小值是4ms和10ms，具体取决于浏览器：可能值得注意的是，在第6.4节中，它说明了

。。。timeout小于4，然后将timeout增加到4（根据规范，如果ms值为0-3，它将被设置为4），这样，您可能会发现下面关于Javascript计时的内容非常有用，可以确保超时的最小有效值为1，因此0将被移到1，并因此在之后发生。不确定。无论如何，我不使用小于16ms（60Hz）的计时器，因为这是Windows上的默认计时器分辨率，我不想仅仅为了它而使用高分辨率计时器。我注意到以下链接，其中最小值是4ms和10ms，具体取决于浏览器：可能值得注意的是，在第6.4节中，它说明了
。。。timeout小于4，然后将timeout增加到4（根据规范，如果ms值为0-3，它将被设置为4），这样，您可能会发现下面关于Javascript计时的内容很有帮助，这很有意义。因为JS是同步的，所以它按照计时器队列的顺序运行，并首先使计时器1过期，从而使其执行。非常有用的评论，谢谢！每个浏览器/引擎是否相同？我的firefox日志
15423
@Anonymous0day不，不是。不同的浏览器可以以不同的方式处理计时器。我上面解释的是它是如何在OP浏览器中发生的（我假设它是chrome）。看起来Firefox会以不同的方式在队列中的每个计时器上打勾（它可能会先打勾剩余时间最小的计时器，但这只是一个猜测）。@Spencer Wieczorek好极了，我不知道，现在我知道了！谢谢你的解释！啊，这很有道理。因为JS是同步的，所以它按照计时器队列的顺序运行，并首先使计时器1过期，从而使其执行。真的很有帮助的评论，谢谢！每个浏览器/引擎是否相同？我的firefox日志
15423
@Anonymous0day不，不是。不同的浏览器可以以不同的方式处理计时器。我上面解释的是它是如何在OP浏览器中发生的（我假设它是chrome）。看起来Firefox会以不同的方式在队列中的每个计时器上打勾（它可能会先打勾剩余时间最小的计时器，但这只是一个猜测）。@Spencer Wieczorek好极了，我不知道，现在我知道了！谢谢你的解释！