Deep Dive into the JavaScript Event Loop All In One

深入学习 JavaScript 事件循环

Dive deep into the JavaScript event loop with the MDN docs
通过 MDN 文档深入学习 JavaScript 事件循环

Re-learn the JavaScript Event Loop In Depth All In One
重新深入学习 JavaScript 事件循环

事件循环的本质：
js 触发的所有事件都会被转化成一个任务，依次放到任务队列中排队，等待被主线程执行（单线程机制）；
从宏任务队列中，队头取出一个任务，先依次执行该任务中的所有同步代码，然后在依次执行所有异步代码；
异步代码中，先执行完微任务队列中的微任务，在执行其他的宏任务；
当该任务执行完毕，接着检查任务队列是否为空，不为空就接着执行下一个宏任务；
就这样不断的重复执行以上步骤，进行事件循环的持续；

`Event Loop` / 事件循环

Stack: 栈(后进先出，入栈，出栈)，值类型，函数调用栈
Heap: 堆，对象，引用类型
Queue: 队列(先进先出，入队，出队)，宏任务队列，微任务任务，消息队列

task queue 任务队列 === macrotask queue 宏任务队列

https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop#run-to-completion

任务(`宏任务`) vs `微任务`

tasks/macrotask vs microtasks

macrotask 宏任务:
setTimeout, setInterval, requestAnimationFrame, requestIdleCallback
clearTimeout, clearInterval, cancelAnimationFrame
I/O, UI rendering
setImmediate ⚠️, clearImmediate⚠️

microtask 微任务:
Promise (.then/.catch/.finally), Async / Await, queueMicrotask,
MutationObserver，IntersectionObserver, PerformanceObserver, ResizeObserver
process.nextTick

`queueMicrotask`

let id = setInterval(() => {
  console.log(`4`);
  clearInterval(id);
});

setTimeout(() => {
  console.log(`3`);
});

queueMicrotask(() => {
  console.log(`2`);
});

console.log(`1`);

/*

1
2

3
4

*/

let id = setInterval(() => {
  console.log(`5`);
  clearInterval(id);
});

setTimeout(() => {
  console.log(`4`);
});

Promise.resolve().then(() => console.log(`2`));

queueMicrotask(() => {
  console.log(`3`);
});

console.log(`1`);

/*

1
2

3
4
5

*/