setTimeout,promise,promise.then, async,await执行顺序问题

原创已于 2022-09-12 17:26:26 修改 · 212 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#多线程 #js #队列

于 2021-03-13 18:36:56 首次发布

本文详细解析了JavaScript中setTimeout、Promise、async/await等异步操作的执行顺序，并通过具体示例展示了宏任务与微任务的运行机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

setTimeout,promise,promise.then, async,await执行顺序问题

请看下面题目：

async function async1() {
　　　　console.log('async1 start');
　　　　await async2();
　　　　console.log('asnyc1 end');
　　}
　　async function async2() {
　　　　console.log('async2');
　　}
　　console.log('script start');
　　setTimeout(() => {
　　　　console.log('setTimeOut');
　　}, 0);
　　async1();
　　new Promise(function (reslove) {
　　　　console.log('promise1');
　　　　reslove();
　　}).then(function () {
　　　　console.log('promise2');
　　})
　　console.log('script end');

结果打印输出结果如下：

script start

　　async1 start

　　async2

　　promise1

　　script end

　　async1 end

　　promise2

　　setTimeout

下面是个人理解：

　js事件分两种：宏任务(macro task) 和微任务(micro task)

　　　　宏任务包括： script(读取执行script代码也算一种任务) setTimeout setInterval

　　　　微任务包括：promise.then(注意是promise.then) , process.nextTick

　　　　事件执行顺序: 先执行宏任务，然后执行微任务

　　任务执行顺序：先执行同步代码，后执行异步代码

　　　　上述代码的同步代码有哪些呢：

　　　　　　console.log('script start');

　　　　　　async1();

　　　　　　console.log('async1 start');

　　　　　　console.log('async2');

　　　　　　console.log('promise1');

　　　　　　console.log('script end');

　　　　　　值得注意的是

　　　　　　1. async声明的函数

　　　　　　　　如果没有await 跟普通函数一样

　　　　　　　　如果存在await await之前的代码包括await紧跟的这个函数都是同步执行的

　　　　　　　　await执行async2这个函数之后await让出了线程，把返回的promise加入了微任务异步队列，所以async1()下面的代码也要等待上面完成后继续执行;

　　　　　　　　　　上述代码中由于在执行async2之前还没有执行new Promise 所以不会把promise.then这个微任务添加到异步队列中

　　　　　　　　　　善于动手的小伙伴可以试着把 new Promise那段代码放到async1();之前会返现执行顺序不一样　　

　　　　　　2. new Promise（）是声明就立即执行的, promise.then才是异步；

　　　　然后是异步代码：promise.then setTimeout

3.3 微任务 & 宏任务

常见的宏任务、微任务分别有哪些
宏任务：setTimeout、setInterval、Ajax、DOM事件
微任务：Promise.then()、async/await