09-宏任务和微任务

准备知识

  • 在执行一个 Promise 对象的时候，当走完resolve();之后，就会立刻把 .then()里面的代码加入到微任务队列当中。

  • 任务的一般执行顺序：同步任务 —> 微任务 —> 宏任务。

代码举例

举例 1：宏任务和微任务的执行顺序

  1. setTimeout(() => {
  2.     // 宏任务
  3.     console.log('setTimeout');
  4. }, 0);
  6. new Promise((resolve, reject) => {
  7.     resolve();
  8.     console.log('promise1'); // 同步任务
  9. }).then((res) => {
  10.     // 微任务
  11.     console.log('promise then');
  12. });
  14. console.log('qianguyihao'); // 同步任务

打印结果：

  1. promise1
  2. qianguyihao
  3. promise then
  4. setTimeout

上方代码执行的顺序依次是：同步任务 —> 微任务 —> 宏任务。

举例 2：宏任务和微任务的嵌套

  1. new Promise((resolve, reject) => {
  2.     setTimeout(() => {
  3.         resolve();
  4.         console.log('setTimeout'); // 宏任务
  5.     }, 0);
  6.     console.log('promise1');
  7. }).then((res) => {
  8.     // 微任务
  9.     console.log('promise then');
  10. });
  12. console.log('qianguyihao');

打印结果：

  1. promise1
  2. qianguyihao
  3. setTimeout
  4. promise then

上方代码解释：在执行宏任务的过程中，创建了一个微任务。但是需要先把当前这个宏任务执行完，再去创建并执行微任务。