js事件循环中的宏任务与微任务

宏任务与微任务

在js中事件执行顺序依次为

1、事件总栈中的同步任务

2、事件总栈异步任务

2.1、异步任务中的微任务

2.2、异步任务中的宏任务

常见的微任务

常见的微任务包括： promise 的回调（一定是回调！）、node 中的 process.nextTick 、对 Dom 变化监听的MutationObserver。

常见的宏任务

常见的宏任务包括： script 脚本的执行、setTimeout ，setInterval ，setImmediate 一类的定时事件，还有如 I/O 操作、UI 渲染等。

在代码输出题中练习

const promise = new Promise((resolve, reject) => {
    console.log(1); 
    resolve(); 
    console.log(2);
})

promise.then(() => {
    console.log(3);
})

console.log(4);

结果：// 答案 1 2 4 3 promise.then 进入宏队列 1和2 没有在promise的回调，在事件总栈执行

const promise = new Promise((resolve, reject) => {
    console.log(1); 
    setTimeout(()=>{
      console.log(2);
      resolve(); 
      console.log(3);
    })
})
promise.then(() => {
    console.log(4);
})

console.log(5);

//答案 1,5,2,3,4 因为1没有在promise的回调中，所以和5一起在事件总栈就执行；setTimeout是微任务，promise是宏任务，所以2和3在4之前执行

async function m(){
  const n = await 1;
  console.log(n);
}

m();
console.log(2);

//答案 2 1 async和await作为处理异步函数的语法糖 用async标志的函数在异步栈执行，console.log(2)在事件总栈中执行 

var a;
var b = new Promise((resolve, reject) => {
  console.log('promise1');
  setTimeout(()=>{
    resolve();
  }, 1000);
}).then(() => {
  console.log('promise2');
}).then(() => {
  console.log('promise3');
}).then(() => {
  console.log('promise4');
});

a = new Promise(async (resolve, reject) => {
  console.log(a);
  await b;
  console.log(a);
  console.log('after1');
});

console.log('end');

//答案 promise1，undefined，end，promise2，promise3，promise4，Promise { } ，after1