25-什么是事件循环

一、是什么

🍿🍿🍿JavaScript是一门单线程的语言、

意味着同一时间内只能做一件事，但是这并不意味着单线程就是阻塞，而实现单线程非阻塞的方法就是事件循环

在JavaScript中，所有的任务都可以分为

• 同步任务：立即执行的任务，同步任务一般会直接进入到主线程中执行
• 异步任务：异步执行的任务，比如ajax网络请求，setTimeout定时函数等

同步任务与异步任务

同步任务进入主线程，即主执行栈，异步任务进入任务队列，主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。上述过程的不断重复就事件循环

提示：以下是本篇文章正文内容，下面案例可供参考

二、宏任务与微任务

😂😂😂如果将任务划分为同步任务和异步任务并不是那么的准确

console.log(1)
setTimeout(()=>{
    console.log(2)
}, 0)
new Promise((resolve, reject)=>{
    console.log('new Promise')
    resolve()
}).then(()=>{
    console.log('then')
})
console.log(3)
1
2
3
4
5
6
7
8
9
10
11

如果按照上面流程图来分析代码，我们会得到下面的执行步骤

• console.log(1)，同步任务，主线程中执行
• setTimeout() ，异步任务，放到 Event Table，0 毫秒后 console.log(2)回调推入 Event Queue 中
• new Promise ，同步任务，主线程直接执行
• .then ，异步任务，放到 Event Table
• console.log(3)，同步任务，主线程执行

所以按照分析，它的结果应该是 1 => ‘new Promise’ => 3 => 2 => ‘then’

但是实际结果是：1=>‘new Promise’=> 3 => ‘then’ => 2

出现分歧的原因在于异步任务执行顺序，事件队列其实是一个“先进先出”的数据结构，排在前面的事件会优先被主线程读取

例子中 setTimeout回调事件是先进入队列中的，按理说应该先于 .then 中的执行，但是结果却偏偏相反

原因在于异步任务还可以细分为微任务与宏任务

微任务

🌭🌭🌭一个需要异步执行的函数，执行时机是在主函数执行结束之后、当前宏任务结束之前

常见的微任务有

• Promise.then
• MutaionObserver
• Object.observe（已废弃；Proxy对象替代）