Bitte schauen Sie sich diese vier setTimeout-Funktionen und ihre Ausführungsteile an

Question

//1
setTimeout(() => {
  console.log('hi');
}, 5000)

//2
setTimeout(() => {
  console.log('hello');
}, 3000)

//3
setTimeout(() => {
  console.log('bye');
}, 0)

//4
setTimeout(() => {
  console.time('the code took:');
  let i = 10000
  while (i--) {
    console.log(i);
  }
  console.timeEnd('the code took:')
}, 7000)

Hier habe ich vier setTimeout-Funktionen geschrieben, die nach meinem Verständnis gleichzeitig in der Rückrufwarteschlange ausgeführt werden, oder? Wenn ich recht habe, dann ist meine Frage, ob die vierte setTimeout()-Funktion die Hälfte oder mehr als die Hälfte ihrer Ausführung in der Rückrufwarteschlange abgeschlossen hat oder ob sie nach 7 Sekunden, nachdem sie in die Call-Stack-Implementierung verschoben wurde, von vorne beginnt? Was passiert also hinter den Kulissen?

Answer 1

这些函数在回调队列中不会并行或同时运行。它们是单独和异步地调度的。执行顺序取决于每个函数的指定延迟。对于每个setTimeout函数，都会安排一个回调在指定的延迟之后执行。

执行顺序如下：

第三个setTimeout（0毫秒延迟）
第二个setTimeout（3000毫秒延迟）
第一个setTimeout（5000毫秒延迟）
第四个setTimeout（7000毫秒延迟）

然而，第四个setTimeout函数不一定与其他setTimeout函数一起运行，也不能保证其自身的执行时间。执行顺序由回调队列确定，事件循环从回调队列中获取任务，并且仅当调用栈为空时才在调用栈中运行它们。因此，只有在调用栈中没有其他任务时，第四个setTimeout函数才会开始执行。运行给定代码后，输出应按照以下顺序显示：

以下是输出的序列：

1. bye
2. hello
3. hi
4. 从10000打印到0（降序）
5. 代码执行时间为...毫秒