javascript事件循环和事件队列（浏览器环境）

以前对js的事件循环和事件队列不是很明白，只知道js是单线程，什么异步啊什么的，没有深入的去了解过，所以导致有些时候执行的顺序不是朝着自己想当然的执行顺序！弄的就很头疼！所以本篇文字将记录一下什么是事件循环和事件队列，忘记的时候可以再回来看看多巩固！

javascript有一个执行栈和任务队列，主线程将会按顺序执行代码，遇到函数的时候，将函数入栈，执行完函数之后再将函数弹出栈，直到所有的代码都执行完毕为止。

在遇到有异步操作的时候如：（setTimeout，ajax）等这些，浏览器自己会去执行这些异步的操作，在浏览器执行完这些异步的操作之后，浏览器会把事件定义的回调函数推入主线程的任务队列中，在主线程执行栈清空之后，会去执行任务队列中的回调函数，直到任务队列清空为止，然后再回到主线程执行栈继续执行，从而进入一个无限循环这个就叫事件循环

image.png

分的更细一点

宏任务&微任务

一个浏览器环境只能有一个事件循环，但是一个事件循环可以有多个任务队列。
宏任务：浏览器的渲染，setTimeout，ajax，I/O等
微任务：process.nextTick, Promise等
当遇到setTimeout，I/O等事件的时候，会创建一个宏任务，当遇到promise的时候会创建一个微任务，两个分别挂起的任务队列。当主线程的执行栈闲置的时候，开始处理微任务，把所有的微任务处理完后，再去取宏任务队列的第一个，把宏任务队列的回调函数拖到执行栈中执行，返回主线程执行栈。
每一次事件循环，只会处理一个宏任务，等到微任务一次性完毕之后，再清理宏任务。在处理这些微任务的同时，还可能会加入新的微任务，也会一一执行完毕，直到微任务队列清空为止。

image.png

下面看几个例子：

image.png

上述代码打印顺序: 开始 -> 开始1 -> 开始2 -> 结束 -> 1 -> 2 -> 3
解析：
主线程执行栈：console.log('开始') 开始1，开始2，结束。执行setTimeout的时候将回调函数添加到任务栈里面，当主线程执行完后，setTimeout的定时会执行然后再根据定时的回调再清除任务栈里面的回调函数。setTimeout的第二个参数时间，不一定是等到多少秒后再去执行的，否则写0的话就变成0秒了，这个是等主线程执行栈为空的时候再才去执行。

---

我是第二题：

image.png

打印顺序：开始 -> fn1 -> ajaxfn -> 结束 -> ajaxpromise结束 -> setTimeout
解析：
流程：开始-> fn1()入栈 执行 推出栈-> setTimeout()执行，回调函数入宏任务队列-> ajaxfn() 入栈执行 打印ajaxfn 返回promise，此时就有一个微任务promise添加到任务队列里面了-> 结束 -> 此时主线程执行栈闲置，然后开始执行任务队列，微任务promise开始执行，微任务队列清空后，然后再执行宏任务，取出第一个并打印setTimeout。
巧记：

我们只需记住当前执行栈执行完毕时会立刻先处理所有微任务队列中的事件，然后再去宏任务队列中取出一个事件。同一次事件循环中，微任务永远在宏任务之前执行。

setTimeout(function () {
    console.log(1);
});

new Promise(function(resolve,reject){
    console.log(2)
    resolve(3)
}).then(function(val){
    console.log(val);
})

打印顺序： 2 -> 3 -> 1
先执行完微任务promise，然后再执行宏任务setTimout的回调函数

我是分隔符

---

文末思考题:

image.png

---

先别着急看答案

---

打印的顺序是什么呢？？

只要记住先把微任务先执行完就清楚啦

答案:

• 开始
• fn1
• ajaxfn
• ajaxfn
• 结束
• ajaxpromise结束
• ajaxpromise结束2
• promise3
• setTimeout
• setTimeout2

---

ok,事件循环和事件队列你是否搞清楚了呢？反正我目前来说是有点清晰了，还需要在工作当中多去实践和认证，如果文章中有不对的地方和描述不是很清晰的地方希望看到这篇文章的大佬帮忙指正，可以留言评论区哟~先谢各位有缘刷到此篇文章的大佬了，感谢你们能看到这篇文章的结尾处。