前端JS中如何详细解析事件循环（Event Loop）机制？

本文共计1743个文字，预计阅读时间需要7分钟。

前言：我们知道，JavaScript 是单线程执行的，那么异步的 JavaScript 是如何处理的呢？例如下面的代码是如何进行输出的：

console.log(1);setTimeout(function() { console.log(2);}, 0);new Promise(function(resolve) { console.log(3); resolve();}).then(function() { console.log(4);});

前言

我们知道 js 是单线程执行的，那么异步的代码 js 是怎么处理的呢？例如下面的代码是如何进行输出的：

console.log(1); setTimeout(function() { console.log(2); }, 0); new Promise(function(resolve) { console.log(3); resolve(Date.now()); }).then(function() { console.log(4); }); console.log(5); setTimeout(function() { new Promise(function(resolve) { console.log(6); resolve(Date.now()); }).then(function() { console.log(7); }); }, 0);

在不运行的情况可以先猜测下最终的输出，然后展开我们要说的内容。

1. 宏任务与微任务

依据我们多年编写 ajax 的经验：js 应该是按照语句先后顺序执行，在出现异步时，则发起异步请求后，接着往下执行，待异步结果返回后再接着执行。但他内部是怎样管理这些执行任务的呢？

在 js 中，任务分为宏任务(macrotask)和微任务(microtask)，这两个任务分别维护一个队列，均采用先进先出的策略进行执行！同步执行的任务都在宏任务上执行。