一文弄懂JavaScript事件循环Event Loop

单线程

我们知道JavaScript是一门单线程语言，一个页面所有的JavaScript代码都是一行一行的执行，如果中间出现错误，那么下面的代码就不会执行，就行alert()一样，如果没有点击确定，alert下面的代码就不会执行。JavaScript单线程也符合了页面的交互逻辑，不能对同一个DOM元素进行同时更改。
JS是单线程运行，也就是说，在同一个时间内只能做一件事，所有的任务都需要排队，前一个任务结束，后一个任务才能开始。但是又存在某些任务比较耗时，如IO读写等，所以需要一种机制可以先执行排在后面的任务，这就是：同步任务(synchronous)和异步任务(asynchronous)。JS的执行机制就可以看做是一个主线程加上一个任务队列(task queue)。同步任务就是放在主线程上执行的任务，异步任务是放在任务队列中的任务。所有的同步任务在主线程上执行，形成一个执行栈;异步任务有了运行结果就会在任务队列中放置一个事件；脚本运行时先依次运行执行栈，然后会从任务队列里提取事件，运行任务队列中的任务，这个过程是不断重复的，所以又叫做事件循环(Event loop)。

任务队列

任务可以分为同步任务和异步任务
同步任务：在主线程上排队执行的任务；同步就是按照一步一步的去执行，只有任务被执行完，才进行下一步。举个例子，烧水和切菜，你要等水烧开了再切菜。
异步任务:不进入主线程，而进入任务队列的任务，只有等主线程执行完，得到通知才会进入主线程执行；异步就是在执行的过程中可以去干别的事，举个例子，烧水和切菜，你可以一边烧水，一边切菜。
执行流程
执行时会把所有同步任务全部压入主线程执行，异步任务会注册函数，然后进入事件队列，等到主线程为空时，也就是同步任务执行完的时候才会执行事件队列里的；

Event Loop

前面说过 JavaScript 是单线程的，它是如何去处理这些异步任务和事件呢？主线程执行的时候，当它发现一个异步任务时，会将该任务放入一个任务队列中，当主线程完成当前任务后，才会从任务队列中获取新任务一个一个执行。当然任务队列分两种：

1. 宏任务：整体JavaScript代码，setTimeout, setInterval, setImmediate（node才有），requestAnimationFrame（浏览器才有）；
2. 微任务 ：process.nextTick，Object.observe, MutationObserver，Promise.then catch finally
   举个例子：在买菜付款的时候，每个人都是一个大的宏任务；付款就是小宏任务，而付款后如果要做的事就是微任务；
   执行流程
   1、先执行主线程
   2、遇到宏队列（macrotask）放到宏队列（macrotask）
   3、遇到微队列（microtask）放到微队列（microtask）
   4、主线程执行完毕
   5、执行微队列（microtask），微队列（microtask）执行完毕
   6、执行一次宏队列（macrotask）中的一个任务，执行完毕
   7、执行微队列（microtask），执行完毕
   8、依次循环。。。
   

例子

1. 例子一

console.log('1')
setTimeout(()=>{
	console.log('2')
},0)
console.log('3')

上述代码，setTimeout是异步任务，所以要等同步执行完毕才能进入主线程执行，所以输出1,3,2，你做对了吗？
2. 例子二

console.log('1')
setTimeout(()=>{
	console.log('2')
},0)
new Promise((resolve)=>{
	console.log('3')
	resolve()
}).then(()=>{
	console.log('4')
})
console.log('5')

上述代码，我们一步步分析
宏任务有： 整体代码，setTimeout
微任务有：Promise.then
执行流程：
第一次循环，执行宏任务整体代码输出 1，3，5；此次循环有微任务Promise.then，执行微任务输出4；
第二次循环，执行宏任务setTimeout输出 2，此次循环没有微任务，循环结束；
所以输出1，3，5，4， 2，你做对了吗？
3. 例子三

setTimeout(()=>{
console.log('1')
},0)
console.log('2')
new Promise((resolve)=>{
	console.log('3')
	resolve()
}).then(()=>{
	console.log('4')
}).then(()=>{
	console.log('5')
})

上述代码，我们一步步分析
宏任务有： 整体代码，setTimeout
微任务有：Promise.then
执行流程：
第一次循环，执行宏任务整体代码输出 2，3；此次循环有两个微任务Promise.then，执行微任务输出4，5；
第二次循环，执行宏任务setTimeout输出 1，此次循环没有微任务，循环结束；
所以输出2，3，4，5， 1，你做对了吗？
4. 例子4

console.log('1')
setTimeout(()=>{
	console.log('2')
	new Promise((resolve)=>{
		console.log('3')
		resolve()
	}).then(()=>{
		console.log('4')
	})
})
new Promise((resolve)=>{
	console.log('5')
	resolve()
}).then(()=>{
	console.log('6')
})
setTimeout(()=>{
	console.log('7')
	new Promise((resolve)=>{
		console.log('8')
		resolve()
	}).then(()=>{
		console.log('9')
	})
})

上述代码，我们一步步分析
宏任务有： 整体代码，setTimeout
微任务有：Promise.then
执行流程：
第一次循环，执行宏任务整体代码输出 1，5；此次循环有微任务Promise.then，执行微任务输出6；
第二次循环，执行宏任务setTimeout输出 2，3；此次循环有微任Promise.then，执行微任务输出4；
第二次循环，执行宏任务setTimeout输出 7，8；此次循环有微任Promise.then，执行微任务输出9；
所以输出1，5，6，2， 3，4，7，8，9，你做对了吗？
5. 例子五

setTimeout(()=>{
console.log('2')
},2)
setTimeout(()=>{
	console.log('1')
},1)
setTimeout(()=>{
	console.log('0')
},0)

上述代码，我们一步步分析
宏任务有：setTimeout
微任务有：无
注意：setTimeout最时间为4ms,在底层时间代码大概是这样 time = max(1ms,num*1ms) num为我们setTimeout的第二个参数，1ms代表一毫秒，因此，填入0，输出1；因此第三个setTimeout和第二个一样；
执行流程：3个分别执行宏任务，注册回调函数，根据顺序，先输出1后输出0，根据时间再输出2；
所以输出1，0，2，你做对了吗？
6. 例子6

async function async1(){
console.log('1')
	await async2()
	console.log('2')
}
async function async2(){
	console.log('3')
}
async1()
console.log('4')
setTimeout(()=>{
	console.log('5')
},0)
new Promise((resolve)=>{
	console.log('6'
	resolve()
}).then(()=>{
	console.log('7')
})
console.log('8')

上述代码，我们一步步分析
async1函数中的代码相当于

function async1(){
console.log('1')
	Promise.resolve(async2()).then(()=>{
		console.log('2')
	})
}

宏任务有：整体代码，setTimeout
微任务有：Promise.then
执行流程：
第一次循环，执行宏任务整体代码输出 1，3，4，6，8；此次循环有微任务Promise.then（是async的转化）和 Promise.then，执行微任务输出2，7；
第二次循环，执行宏任务setTimeout输出 5；此次循环没有有微任，结束循环；
所以输出1，3，4，6， 8，2，7，5，你做对了吗？
7. 例子七

console.log('1')
process.nextTick(()=>{
console.log('2')
})
setTimeout(()=>{
	console.log('3')
	process.nextTick(()=>{
		console.log('4')
	})
},0)
new Promise((resolve)=>{
	console.log('5')
	resolve()
}).then(()=>{
	console.log('6')
})
console.log('7')

上述代码，我们一步步分析(注意在node环境下运行）
宏任务有：整体代码，setTimeout
微任务有：Promise.then，process.nextTick
执行流程：
第一次循环，执行宏任务整体代码输出 1，5，7；此次循环有微任务process.nextTick 和 Promise.then，执行微任务输出2，6；
第二次循环，执行宏任务setTimeout输出 3，4；此次循环没有有微任，结束循环；
所以输出1，5，7，2， 6，3，4 你做对了吗？