对阻塞操作的执行 JavaScript 感到困惑，即（执行顺序）

Question

async () => {
try {
  setTimeout(() => console.log('next task'), 0);
  await timeTakingFunc();
  console.log('after waiting for timetaking function');
} catch (error) {
  console.log(error.message);
}})();

输出：
等待计时功能后
下一个任务

---

不应该首先将“下一个任务”打印为 timeTakingFunction();执行时间长，超时只有0ms？

计时功能：

async function timeTakingFunc() {
return new Promise((resolve, error) => {
    for (let t = 1; t < 100000; t++) {
      for (let k = 1; k < 100000; k++) {
      }
    }
    resolve();
  });
};

Answer 1

您的timeTakingFunc同步完成所有工作，原因有两个：

1. async 函数的代码在第一个 await 或 return 之前是同步的。这样它就可以开始异步完成的任何进程。
2. 您传递给new Promise 的执行程序函数是同步运行的，在新的promise 返回到进行调用的代码之前运行完成——原因与async 函数同步启动的原因相同。 （事实上​​，async 函数的开头，在第一个 await 或 return 之前，直接类似于 Promise 执行器函数的主体。）

所以这个函数实际上并没有什么异步的。

（旁注：没有理由在从不使用 await 并且明确创建其承诺的函数上使用 async。这是多余的。）

如果函数中有任何实际异步工作几乎需要任何时间才能完成，您会看到您期望的输出顺序：

async function timeTakingFunc() {
    // This fetch fails, but it takes non-zero time to do so
    try {
        const response = await fetch("https://via.placeholder.com/150");
        if (response.ok) {
            await response.arrayBuffer();
        }
    } catch (e) {
    }
}
(async () => {
    try {
        setTimeout(() => console.log('next task'), 0);
        await timeTakingFunc();
        console.log('after waiting for timetaking function');
    } catch (error) {
        console.log(error.message);
    }
})();

但是使用该代码，timeTakingFunc 是同步的：

async function timeTakingFunc() {
    const p = new Promise((resolve, error) => {
        console.log("Start of executor function");
        for (let t = 1; t < 100000; t++) {
            for (let k = 1; k < 100000; k++) {}
        }
        console.log("End of executor function");
        resolve();
    });
    console.log("timeTakingFunc returning promise");
    return p;
};
(async () => {
    try {
        setTimeout(() => console.log('next task'), 0);
        await timeTakingFunc();
        console.log('after waiting for timetaking function');
    } catch (error) {
        console.log(error.message);
    }
})();

...JavaScript 引擎会这样做：

1. 设置定时器（在某些时候它会将任务排队以运行定时器回调）
2. 运行timeTakingFunction 的同步部分（这就是全部）以完成
3. [由于await] 在当前任务的微任务队列中排队一个微任务以运行剩余的代码
4. 到达当前任务的结尾
5. 处理微任务队列
   • 运行剩余的代码，记录"after waiting for timetaking function"
6. 处理任务队列中的下一个任务，可能是定时器回调（如果没有，它会很快出现在队列中）
   • 当定时器任务运行时，它会记录"next task"

这就是为什么你看到你看到的顺序，具有同步功能。