题库练习二 事件循环、微任务、宏任务执行顺序

前置参考

JS执行机制-内存模型(堆内存、栈内存、队列、执行栈)、事件循环
async/await

示例详解

常见异步笔试题，请写出代码的运行结果

示例1

//请写出输出内容
async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}
async function async2() {
  console.log('async2');
}

console.log('script start');

setTimeout(function () {
  console.log('setTimeout');
}, 0)

async1();

new Promise(function (resolve) {
  console.log('promise1');
  resolve();
}).then(function () {
  console.log('promise2');
});
console.log('script end');
/*
script start
async1 start
async2
promise1
script end
async1 end
promise2
setTimeout
*/

重点：

1. await立即执行等待的内容，将后面的代码放到微任务中执行
2. Promise.then同一层的微任务，按定义顺序执行

示例二

async function async1() {
  console.log('async1 start');
  await async2();
  console.log('async1 end');
}
async function async2() {
  new Promise(function (resolve) {
    console.log('promise1');
    resolve();
  }).then(function () {
    console.log('promise2');
  });
}
console.log('script start');

setTimeout(function () {
  console.log('setTimeout');
}, 0)
async1();

new Promise(function (resolve) {
  console.log('promise3');
  resolve();
}).then(function () {
  console.log('promise4');
});

console.log('script end');
/*
script start
async1 start
promise1
promise3
script end
promise2
async1 end
promise4
setTimeout
*/

重点：

1. Promise.then同一层的微任务，按定义顺序执行，不同层的微任务，按层级执行

示例3

async function async1() {
  console.log('async1 start');
  await async2();
  setTimeout(function () {
    console.log('setTimeout1')
  }, 0)
}
async function async2() {
  setTimeout(function () {
    console.log('setTimeout2')
  }, 0)
}
console.log('script start');

setTimeout(function () {
  console.log('setTimeout3');
}, 0)
async1();

new Promise(function (resolve) {
  console.log('promise1');
  resolve();
}).then(function () {
  console.log('promise2');
});
console.log('script end');
/*
script start
async1 start
promise1
script end
promise2
setTimeout3
setTimeout2
setTimeout1
*/

重点：

1. setTimeout立即执行，将回调放入宏任务等待执行。所以微任务中的setTimeout也要等待微任务执行时，才会执行。
2. setTimeout按照放入队列中的顺序执行
3. 宏任务等待所有已创建的微任务执行完才执行