「JavaScript」 弄懂Event Loop

Event loop

首先什么是Event loop, Event loop 是一个执行模型，就是说明js在浏览器中的顺序执行，首先我们来从上到下来逐步分析

宏队列 和 微队列

宏队列（macrotase)，也叫task queues, 主要的这些异步任务有：

• setTimeout
• setInterval
• requestAnimationFrame
• UI rendering
  微对垒（microtask), 这些异步任务有
• Promise
• Object.observe
• Mutation.Observe

具体流程

image.png

这张图把Event loop完整的描述出来了

1. 执行全局的同步代码
2. 调用task Queue( 这里值得注意哦，每次执行一个macrotask)
3. 然后执行micrtask queue, 这里全部执行完 【如果mircrtask还嵌套这mirtask queue，则继续往下执行】
   4，5 反复执行2，3操作

小结：

1. 宏队列一次只从队列中取一个任务执行，执行完后就去执行微任务队列中的任务
2. 微任务的队列会被依次去出来，直到对列为空
3. UI rending一般是凡在mircrotask 后执行

eg:

console.log(1);

setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
})

setTimeout(() => {
  console.log(6);
})

console.log(7);

答案： 1 4 7 5 2 3 6

eg2:

console.log(1);

setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
  
  Promise.resolve().then(() => {
    console.log(6)
  }).then(() => {
    console.log(7)
    
    setTimeout(() => {
      console.log(8)
    }, 0);
  });
})

setTimeout(() => {
  console.log(9);
})

console.log(10);

答案：1 4 10 5 6 7 2 3 9 8

node Event Loop:
node Event Loop
参考：
https://juejin.im/post/5b8f76675188255c7c653811
https://juejin.im/entry/58d4df3b5c497d0057eb99ff