阅读 380

简单了解JS事件循环(Event Loop)

本文章参考阮一峰大佬对 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知识以及练习题请参考:

juejin.cn/post/687074…

最后的最后,记住,JavaScript 是一门单线程语言,异步操作都是放到事件循环队列里面,等待主执行栈来执行的,并没有专门的异步执行线程。

文章分类
前端
文章标签