简述Js的事件循环

普通消息队列

一个代码块中的所有同步代码，都会被看作一个宏任务，添加到普通消息队列的尾部

延迟执行队列

当你在代码中使用 setTimeout 或 setInterval 时，会创建一个宏任务
延迟指定的时间后，将其放入延迟执行队列的尾部

事件循环系统

为了简化叙述，我们可以理解为：每一轮事件循环都执行一个宏任务，每一轮事件循环都关联一个微任务队列
具体过程如下：

• 检查普通消息队列是否为空，若不为空，则从队列头部取出一个宏任务执行；否则，从延迟执行队列头部取出一个宏任务执行
• 执行过程中如果遇到 setTimeout 或 setInterval，延迟指定时间后，将其作为一个宏任务 添加到延迟执行队列的尾部
• 执行过程中如果创建了微任务（Promise 或者 MutationObserver），就将它添加到当前的微任务队列中
• 执行当前微任务队列中的所有微任务
• 开始下一个循环

---

例题1：

console.log('--开始--');

setTimeout(() => {
  console.log('timer1');  
}, 0);

new Promise((resolve, reject) => {
  for (let i = 0; i < 5; i++) {
    console.log(i);
  }
  resolve()
}).then(()=>{
  console.log('Promise'); 
})

console.log('--结束--');

//---开始--
//0
//1
//2
//3
//4
//--结束--
//Promise
//timer1

第一轮循环：普通消息队列中只有一个宏任务（整个script）

• 遇到console.log，直接输出 "--开始--"
• 遇到setTimeout，因为指定时间为0ms，所以立即将其回调函数timer1添加到延迟执行队列的尾部
• 遇到Promise的executor，直接执行，依次输出0、1、2、3、4，遇到resolve，将其回调函数添加到当前的微任务队列中
• 遇到console.log，直接输出 “--结束--”
• 检查微任务队列，发现一个微任务，立即执行，输出“Promise”

第二轮循环：普通消息队列为空，延迟执行队列中有一个宏任务（timer1）

• 执行timer1的回调函数
• 发现微任务队列为空，本轮循环结束

例题2：

new Promise((resolve) => {
  console.log('this is executor');
  resolve();
}).then(() => {
  console.log('this is resolve');
  setTimeout(() => { // 命名为timer1
    console.log('timer1');
  }, 4)
})

setTimeout(() => { // 命名为timer2
  console.log('timer2');
}, 4)

console.log('-- 结束--');

//this is executor
//-- 结束--
//this is resolve
//timer2
//timer1

第一轮循环：普通消息队列中只有一个宏任务（整个script）

• 遇到Promise的executor，直接执行，输出“this is executor”
• 遇到resolve，将其回调函数添加到当前的微任务队列中
• 遇到setTimeout，在4ms后将timer2添加到延迟执行队列的尾部
• 遇到console.log，直接输出 “--结束--”
• 检查微任务队列，发现一个微任务，立即执行
• 遇到console.log，直接输出 “this is resolve”
• 遇到setTimeout，在4ms后将timer1添加到延迟执行队列的尾部，本轮循环结束

第二轮循环：普通消息队列为空，延迟执行队列头部为timer2

• 执行timer2，输出timer2

第三轮循环：延迟执行队列头部为timer1

• 执行timer1，输出timer1