Promise为什么要执行呼叫堆栈？

Question

function main() {
  console.log("S-1");

  setTimeout(() => {
    console.log("setTimeout");
  }, 0);

  new Promise((resolve, reject) => {
    for (let i = 0; i < 10000000000; i++) {}
    resolve("Promise");
  }).then((res) => console.log(res));

  console.log("S-2");
}

// Invoke function
main();

当我运行main（）函数时，我将获得的输出是：

'S-1'
'S-2'
'Promise'
'setTimeout'

登录“ S-1”后，存在很大的时间差距，然后几秒钟后，其余的，剩下的时间都会立即记录。 记录“ S-2”之后的时间差距不应该发生吗？

Answer 1

承诺构造函数内部的函数同步运行，与脚本的其余部分相同（又是）主线程。构建承诺不会导致创建单独的线程。

如果您立即在承诺构造函数内进行一些重型处理，那么重型处理将必须在控制流回到承诺构造器的外部之前完成。在这种情况下，这意味着循环的许多迭代必须在以下之前完成：

• 构造函数完全完成
• 构造函数，构造函数解散了
• 承诺获得
• 。 Console.log（“ S-2”）; 行运行

以获取您想要或期望的输出而不移动日志，您必须将昂贵的代码卸载到其他环境中，例如a

Answer 2

正如@cleantionperformance所说，JavaScript只能处理一个呼叫堆。它需要一劳永逸地完成此线程。为了承诺和超时，它使用工作和任务队列。事件循环将作业队列和任务队列确定优先级。

让我们尝试了解您在呼叫堆和队列方面写的内容。

function main() {
// 1. execute straight forward 
  console.log("S-1"); 

// 2. sets / schedules a timer, the anonymous function is then stored in the callback 
  setTimeout(() => {
    console.log("setTimeout");
  }, 0);

// 3. create a new Promise, with the constructor acting as executor
// executes immediately, as its designed to set the state of the Promise for the then() to react to.
  new Promise((resolve, reject) => {
    for (let i = 0; i < 10000000000; i++) {}
// 3.5 the resolve signals that the execution is finished
// either returns the promise or passes through the then()
    resolve("Promise");

// 4. after the promise execution has been resolved, 
// then() creates another anonymous function, and stores in the callback.
// at this point there are 2 entries in the callback
  }).then((res) => console.log(res));

// 5. once the above Promise executor has been executed, execute this
  console.log("S-2");

// By now, since both the timer and promise execution has been done, 
// the timeout is put into the Task Queue and the Promise then() is  put into the Job Queue.

}

// 0. puts this into the call stack and execute
main();   


// 6. The event loop deques all of the call stack from the job queue and puts it into the main call stack to execute.
// hence, the then() is executed first

// 7. The event loop then deques all of the call stack from the task queue and puts it into the main call stack to execute.
// hence, the timeout function is executed next.

如果您想将其作为回调。

function main() {
  console.log("S-1");

  setTimeout(() => {
    console.log("setTimeout");
  }, 0);

  new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("promise");
    }, 1000);
  }).then((res) => console.log(res));

  console.log("S-2");
}

// Invoke function
main();

Reference: https://medium.com/@idineshgarg/let- US-CONSIDER-AN-AXAMPE-A58BB1C11F55