来自 https://ths.js.org/2020/12/13/用可视化的方式解释事件循环和Promise/

在js中调用方法 会把方法存在执行栈中，当有返回值后，就会弹出执行栈

当定时器 1s后 执行fun 函数，

setTimeout(()=>{
  fun()
},1000)

首先程序会在1s后，将方法推入 队列 中，如果此时执行栈为空，则会把fun 函数推入到执行栈，如果执行栈不为空，则会在队列中等待执行栈继续执行

setTimeout(()=>{
  console.log("1")
},0)

const fun = ()=>{
  console.log("2")
}

fun();

打印的结果是

2
1

哪怕定时器是在0s后执行，立即执行，他也是会等待执行栈执行完再执行定时器的任务

promise

promise 差不多 但是他是放在另外一个队列中

console.log("1")
Promise.resolve(2).then(()=>console.log("2"))
console.log("3")

// 打印的结果是是
//1
//3
//2

宏队列和微队列

宏队列

1. setTimeout
2. setInterval
3. I/0
4. requestAnimationFrame

微队列

1. process.nextTick
2. MutationObserver
3. Promise then catch finall

执行的顺序是 执行栈-》微队列 -> 宏队列

console.log("1")
setTimeout(()=>{
  console.log("2")
},0)
Promise.resolve(3).then((res)=>console.log(res))
console.log("4")