本文章参考阮一峰大佬对 Event Loop 详解
一、什么是事件循环(EVENT LOOP)
Event Loop 是一个很重要的概念,指的是计算机系统的一种运行机制。
任务队列( Event Queue )
任务可以分为同步任务和异步任务,同步任务,顾名思义,就是立即执行的任务,同步任务一般会直接进入到主线程中执行;而异步任务,就是异步执行的任务,比如ajax网络请求,setTimeout 定时函数等都属于异步任务,异步任务会通过任务队列的机制(先进先出的机制)来进行协调。具体的可以用下面的图来大致说明一下:
同步和异步任务分别进入不同的执行环境,同步的进入主线程,即主执行栈,异步的进入任务队列。主线程内的任务执行完毕为空,会去任务队列读取对应的任务,推入主线程执行。 上述过程的不断重复就是我们说的 Event Loop (事件循环)。
二、Event Loop 的事件循环机制:
JavaScript的事件分两种,宏任务(macro-task)和微任务(micro-task)
-
宏任务:包括整体代码script,setTimeout,setInterval
-
微任务:Promise.then(非new Promise)
-
事件的执行顺序,
**是先执行宏任务,然后执行微任务**
,这个是基础,任务可以有同步任务和异步任务,同步的进入主线程,异步的进入Event Table并注册函数,异步事件完成后,会将回调函数放入Event Queue中(**宏任务和微任务是不同的Event Queue**
),同步任务执行完成后,会从Event Queue中读取事件放入主线程执行,回调函数中可能还会包含不同的任务,因此会循环执行上述操作。 -
**简单理解:首先执行 宏任务 => 微任务的Event Queue => 宏任务的Event Queue
**
举个例子说明:
根据图片显示我们来整理一下流程:
1.执行console.log('script start')
,输出script start
;
2.执行setTimeout,是一个异步动作,放入宏任务异步队列中;
3.执行async1()
,输出async1 start
,继续向下执行;
4.执行async2()
,输出async2
,并返回了一个promise对象,await让出了线程,把返回的promise加入了微任务异步队列,所以async1()
下面的代码也要等待上面完成后继续执行;
5.执行 new Promise
,输出promise1
,然后将resolve
放入微任务异步队列;
6.执行console.log('script end')
,输出script end
;
7.到此同步的代码就都执行完成了,然后去微任务异步队列里去获取任务
8.接下来执行resolve(async2返回的promise返回的)
,输出了async1 end
。
9.然后执行resolve(new Promise的)
,输出了promise2
。
10.最后执行setTimeout
,输出了settimeout
。
对于promise知识以及练习题请参考: