javascript - 理解 SetTimeout 命令

Question

我仔细阅读了一组在线 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我的原因是 console.log(1) 和 console.log(2) 首先执行，而 setTimeout 被发送到 eventloop，等待一切先完成。打印 5 后，JS 将查看队列，然后 4,3,2 将在下一个插入/弹出。

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

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

任何人都可以澄清幕后发生的事情，以及我应该知道的关于延迟的任何问题吗？

Answer 1

这里我将举例说明执行过程:

  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) 将简单地执行。