一篇文章弄懂JavaScript事件执行机制

JavaScript 是一门单线程的语言？

首先对于一个学前端的人来说，肯定是听过这样一句话， JavaScript 是一门单线程的语言。一些人听到这里的时候就会想，啊，JS这语言不太行啊，只能单线程，太垃圾了。有这种想法人，只能说他还不了解JS。说JS是一门单线程的语言，并不是说它本身有什么缺陷，只能和单线程扯上联系，多线程这种能大大提高效率的事，和它没什么关系。那你就错了。如今有了node，js不仅能在浏览器上执行了，在后端用js写个多线程还不是简简单单的事情么。那你可能就要问了，那为什么JS在浏览器中就非要单线程执行呢？其实JavaScript的单线程，是与它的功能相关的。作为浏览器脚本语言，JavaScript的主要用途是页面与用户的交互，操作DOM元素。这就决定了它只能是单线程的，否则会带来很复杂的问题。比如，JavaScript如果说是多线程的，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，那么浏览器应该以哪个线程为准呢？可是，单线程就意味着同一个时间只能做一件事，如果都是同步执行下去的话，就会出现阻塞的现象，比如发送一个ajax请求，在等待服务器返回数据的过程中，其它什么事情都执行不了，这种情况想想也是灾难性的。所以，在JS中，定时器，ajax请求，事件绑定等操作都是异步执行的。至于单线程中怎么进行异步操作，这就要好好说一说我们今天的主角，JavaScript的执行机制以及其中的事件循环（Event Loop）了。

初步了解JavaScript的执行机制

在浏览器开始解析js文件的时候，会有一个主执行栈，js代码从上到下在主执行栈中执行（之前会有变量提升，函数声明提升一系列操作），遇到函数调用的时候，会将函数放到调用栈（call stack）中执行(调用栈还是在主线程，执行顺序中和全局上下文执行顺序基本相同，至于函数执行上下文，函数调用完后弹出调用栈或继续保留形成闭包就不在这里详细阐述了)，在没有遇到异步任务之前，js就是这样一步步向下执行的。当遇到异步函数的时候，并不会将这个任务放到直接放到主线程中执行，而是先把它放到任务队列( task queue )中，等到主线程的所有任务执行完后，就会从任务队列中拿出一个任务，将其代码放到主线程中执行，至于代码里面又存在的异步任务，依旧是先放到任务队列中去，就是这样从任务队列中拿任务，在主线程中执行，遇到异步任务再放到任务队列中这样的一个循环过程，就成为事件循环（Event Loop）。听起来是不是还挺简单的，别着急，里面还有一些更加细节的东西要说的。

异步任务

首先我们要先明确异步任务都有哪些：

1、定时器都是异步操作
2、事件绑定都是异步操作
3、AJAX中的操作
4、回调函数可以理解为异步（不是严谨的异步操作）

其中，为了防止回调地狱的形成，es6又提供了promise和async/await解决方案（用的最多的两种方案），对于promise成功后的then()和await等待结果的任务的操作，也是要进入任务队列( task queue )。这时就又要提到任务队列中又细分的宏任务（macrotask）和微任务（microtask）了

详细认知JavaScript的执行机制

对于我们熟知的异步任务，是放入宏任务队列中的，promise状态为resolve后的then()和await等待结果的任务是放到微任务队列的。每次主线程的代码执行完以后，是会先把微任务队列中的任务给执行完然后才会拿宏任务队列中的任务放到主线程中执行的。再结合上面说的执行顺序，js代码的执行机制就很明确了。

为了能使你更好更快的理解，我将用提炼的语言给你再总解一遍，首先，你要先知道我提到的几个术语的含义：

1.解决全局任务：是指执行整个js文件，其中同步任务放到主线程中执行，异步任务放到对应的任务队列中。当主线程中将js文件中的的同步任务执行完后，就算解决了解决全局任务。

2.解决一个微任务：是指执行一个微任务中的代码，将这个微任务代码中的同步任务放到主线程中执行，异步任务放到对应的任务队列中。当主线程中将这个微任务中的同步任务执行完后，就算解决了一个微任务。

3.解决一个宏任务：将一个宏任务放在主线程中执行（宏任务肯定是指定了回调函数的，主线程执行异步任务，其实就是执行对应的回调函数）对于这个宏任务中新形成的异步任务放在对应的任务队列中。当主线程将这个宏任务执行完以后，就算解决了一个宏任务。

总结一下就是：
1.解决全局任务（要明确，只要执行js文件，就会而且只会解决一次全局任务）
2.依次解决微任务（解决一个微任务后，再解决下一个微任务，直到微任务队列中的所有微任务都解决完）
3.解决一个宏任务（可能会在任务队列中添加了新的微任务和宏任务）
4.重复2.3步操作，知道解决所有的任务
5.结束

其中，要注意的是，promise和async本身并不是直接放到微任务队列的。

//promise
new Promise((resolve,reject)=>{
    console.log(1); //在new Promies的时候，会直接执行里面的代码的
    resolve('成功的数据') //then中的任务是在执行resolve的时候才放到微任务队列的
    console.log(2)
}).then(res=>{      
    console.log(3)
})
console.log(4)
//运行的结果是：1 2 4 3

//async

async function aaa(){
    console.log(1)  //不是说整个async都会放到微任务队列中，等待前面的部分是同步执行的
    let n = await async1() //在await获取到值后，将后面的代码放到微任务队列中，即使await等待的函数里面并没有异步操作
    console.log(2)
}
function async1(){
    console.log(3)
}
aaa() //运行结果是：1 3 2

看完整个上面的文字描述，现在对js的整个执行机制你心里面应该有一个自己的认知了，那带着你自己的想法，看一看下面的代码，通过代码，相信你会对这个过程的认知更加清晰，甚至可能会打破你已有的认知，让你对整个过程有一个更加准确的理解。

代码通关

答案在最后

1.   console.log('1');
2.   setTimeout(function() {
3.        console.log('2');
4.        new Promise(function(resolve) {
5.            console.log('3');
6.            resolve();
7.        }).then(function() {
8.            console.log('4')
9.        })
10.    },0)
11.    new Promise(function(resolve) {
12.        console.log('5');
13.        resolve();
14.    }).then(function() {
15.        console.log('6')
16.    })
17.    setTimeout(function() {
18.        console.log('7');
19.        new Promise(function(resolve) {
20.            console.log('8');
21.            resolve();
22.        }).then(function() {
23.            console.log('9')
24.        })
25.        console.log('10')
26.    },0)
27.    console.log('11')

看起来是不是有点棘手，不要慌，跟着我一步步的把它给吃掉。

macrotask（宏任务队列）:[]; microtask（微任务队列）:[];console（控制台输出）:[]

第1行，最先输出1是毫无问题的(console:[1])

第2行，遇到定时器，直接放到宏任务队列中，然后跳到11行。（macrotask[第2行]）

第11行，创建一个promise实例，会直接执行传进来的函数
第12行，输出5（console:[1，5]）
第13行，将这个promise实例的状态设置为resolve，同时将其then里面的函数放到微任务队列中（microtask:[第14行]）

第17行，遇到定时器，直接放到宏任务队列中，然后跳到27行。（macrotask[第2行，第17行]）

第21行，输出11（console:[1，5，11]）
此时主线程任务执行完毕（解决了全局任务），要开始依次解决微任务。跳到第14行

第14，15行 输出6（console:[1，5，11，6]，microtask:[]）
此时主线程任务又执行完毕（解决了一个微任务）同时微任务队列也被清空，开始解决宏任务。跳到第2行

第2，3行 输出2（console:[1，5，11，6，2]）

第4行 创建一个promise实例，会直接执行传进来的函数
第5行 输出3（console:[1，5，11，6，2，5，3]）
第6行 将这个promise实例的状态设置为resolve，同时将其then里面的函数放到微任务队列中（microtask:[第7行]，macrotask[第17行]）
此时主线程再次实行完毕（解决了一个宏任务），再执行下一个宏任务之前，要先把微任务清空，所以跳到第7行，解决微任务

第7，8行：输出4（console:[1，5，11，6，2，5，3，4]）
此时主线程再次执行完毕（解决了一个微任务），同时微任务队列也被清空，开始解决宏任务，跳到第17行

17，18行输出7（console:[1，5，11，6，2，5，3，4，7]）

第19行 创建一个promise实例，会直接执行传进来的函数
第20行 输出8（console:[1，5，11，6，2，5，3，4，7，8]）
第21行 将这个promise实例的状态设置为resolve，同时将其then里面的函数放到微任务队列中（microtask:[第22行]）

第25行：输出10（console:[1，5，11，6，2，5，3，4，7，8，10]）
此时主线程再次执行完毕（解决了一个微任务），微任务队列中又有了新任务，继续执行，跳到第22行

第22，23行：输出9（console:[1，5，11，6，2，5，3，4，7，8，10，9]）

一步步下来是不是很清爽，好像也就那么回事，相信现在你对整个流程已经熟记在心了，接下来再做一道题，展现一下自己的实力吧

1.    async function async1() {
2.        console.log('1');
3.        await async2();
4.        console.log('2');
5.    }
6.
7.    async function async2() {
8.        console.log('3');
9.    }
10.    console.log('4');
11.
12.    setTimeout(function() {
13.        console.log('5');
14.    }, 0)
15.    async1();
16.
17.    new Promise(function(resolve) {
18.        console.log('6');
19.        resolve();
20.    }).then(function() {
21.        console.log('7');
22.    });
23.    console.log('8');

macrotask（宏任务队列）:[]; microtask（微任务队列）:[];console（控制台输出）:[]

1-9.定义了两个异步函数，并没有执行，直接跳过

10.输出4（console:[4]）

12.定时器，放到宏任务队列中（macrotask[第12行]）

15.执行async1，跳到第1行

2.输出1（console:[4，1]）

3.执行async2，跳到第7行

7-8.输出3（console:[4，1，3]）
回到第3行，将后面的代码放到微任务队列中（microtask:[第4行]），此时async1函数执行完毕，回到调用函数的地方15行，继续执行后面的代码

//这一组逻辑大家应该已经很熟悉了
17.创建一个promise实例，会直接执行传进来的函数
18.输出6（console:[4，1，3，6]）
19.将这个promise实例的状态设置为resolve，同时将其then里面的函数放到微任务队列中（microtask:[第4行，第20行]）

23.输出8（console:[4，1，3，6，8]）
此时主线程任务执行完毕（解决了全局任务），要开始依次解决微任务。跳到第4行

4.输出2（console:[4，1，3，6，8，2]）
时主线程再次执行完毕（解决了一个微任务），微任务队列中还有任务，继续执行，跳到第20行

20-21 输出7（console:[4，1，3，6，8，2，7]）
此时主线程任务又执行完毕（解决了一个微任务）同时微任务队列也被清空，开始解决宏任务。跳到第12行

12-13 输出5 （console:[4，1，3，6，8，2，7，5]）

相信，将这两题的过程一步步的搞明白，js的执行过程对你来说已经不是什么问题了。

答案：
第一题输出顺序：1 5 11 6 2 3 4 7 8 10 9
第二题输出顺序：4，1，3，6，8，2，7，5

答错了不要紧，相信我的答案分析一定能让你搞明白到底是哪里出了问题。答对了，那就恭喜你了，你对js执行的机制应该掌握的是很不错了，但还是可以看一看答案分析哦，也许你和我有不一样的理解，那你可一定要想办法联系我一下哦。