宏任务和微任务

调用栈和任务队列

JS是单线程的,它的运行是基于事件循环机制(event loop)

• 调用栈
  • 栈
    • 栈是一种数据结构,后进先出（手枪压子弹，后面压进去的先出）
  • 调用栈中,放的是要执行的代码
• 任务队列
  • 队列
    • 队列是一种数据结构,先进先出（排队，先排队的先出）
  • 任务队列是将要执行的代码
  • 当调用栈中的代码执行完毕后,队列中的代码才会按照顺序依次进入到栈中执行
  • 在JS中任务队列有两种
    • 宏任务队列(大部分代码都去宏任务队列中去排队)
    • 微任务队列(Promise的回调函数(then、catch、finally))

整个流程

1. 执行调用栈中的代码
2. 执行微任务队列中的所有任务
3. 执行宏任务中的所有任务

练习1

setTimeout(()=>{
    console.log(1)
})

Promise.resolve().then(() => {
    console.log(2)
})
// 打印结果：2 1

练习2

console.log(1);
setTimeout(() => console.log(2));
Promise.resolve().then(() => console.log(3));
Promise.resolve().then(() => setTimeout(() => console.log(4)));
Promise.resolve().then(() => console.log(5));
setTimeout(() => console.log(6));
console.log(7);

// 打印结果：1 7 3 5 2 6 4

上面的练习如果能做出来并理解了，就说明掌握的差不多了。