【JS进阶】JS的事件循环机制

JS事件循环机制

1.JS的运行机制

JavaScript是一门单线程语言，单线程意味着在一个时间点内只能做一件事，因此JS引擎就会有多余的时间，所以为了解决单线程所造成的这个问题，提出了同步和异步的执行模式。

1.1 同步(阻塞)

同步执行模式就是JS会严格按照原本单线程逻辑，从上到下，从左到右的执行代码逻辑。

1.2 异步(非阻塞)

在执行JS代码时先逐步执行同步代码，遇到异步代码先将异步代码放到任务队列中，直到同步代码执行完毕才执行异步代码。

2.同步任务与异步任务

2.1 同步任务

指在主线程上排队执行的任务，只有前一个任务执行完毕，才能继续执行下一个任务。

2.2 异步任务

指不进入主线程、而进入**“任务队列”**的任务，只有等主线程任务全部执行完毕，"任务队列"的任务才会进入主线程执行。

异步任务又可以分为宏任务和微任务。

如下表：

同时，需要注意的是：

这里的 Promise 是指 Promise 的then、catch方法，而创建 Promise(new Promise()中的内容)，console.log()均为同步任务。

3.任务执行过程

所以实际上的执行顺序为：同步任务 → 微任务 → 宏任务

具体来说，有以下几个步骤：

1. 先执行所有同步任务，碰到异步任务放到任务队列中
2. 同步任务执行完毕，开始执行当前所有的异步任务
3. 先执行任务队列里面所有的微任务
4. 然后执行一个宏任务
5. 然后再执行所有的微任务
6. 再执行一个宏任务，再执行所有的微任务·······依次类推到执行结束。

在这一过程中，第三步到第六步的这个循环，被称为 Event Loop，即事件循环。

事件循环是JavaScript实现异步的一种方法，也是JavaScript的执行机制。

总结

事件循环主要是针对解决宏任务，一次事件循环只能处理一个宏任务，执行宏任务的时候会进行一次轮询，看有没有微任务，如果有微任务将会把微任务执行全部执行完毕，在执行宏任务。

补充1：async/await 的特殊情况