[JavaScript]什么是事件循环(Event Loop)？

经典面试题

console.log('1')

setTimeout(function callback(){
	console.log('2')
}, 1000)

new Promise((resolve, reject) => {
    console.log('3')
    resolve()
})
.then(res => {
    console.log('4');
})

console.log('5')

打印出来是？

正确答案是

1，3，5，4，2

建议看这篇，非常易懂哦

到底什么是Event Loop？那就来了解一下JavaScript分别在浏览器和Node环境下的运行机制吧

下面总结一下：

1. JS是单线程还是多线程？为什么？

答：JS是单线程的，同一时间只能做一件事，作为浏览器语言，JS主要是用于与用户互动，操作Dom，这决定了它只能是单线程，否则会带来复杂的同步问题，假如，js同时有两个线程，一个线程在DOM节点上添加内容，另一线程删除了这个节点，这时浏览器应该以哪个线程为准？

2. JS中同步异步的实现原理

答：JS是单线程的，但是它的运行环境浏览器不是单线程，浏览器默认提供了一个JavaScript引擎，为JS提供一个运行环境。JavaScript引擎简单的来说包括heap(内存堆，浏览器给代码分配运行内存)和stack（调用堆栈，每当运行一段代码JS代码时，都会将代码压入调用栈中，然后在执行完毕以后出栈，先进先出）

function fn() {
    throw new Error('isErr')
}

function foo() {
    fn()
}

function main() {
    foo()
}

main()

上面代码没有异步函数，所以按顺序进入stack

console.log('1')

setTimeout(function callback(){
	console.log('2')
}, 1000)

new Promise((resolve, reject) => {
    console.log('3')
    resolve()
})
.then(res => {
    console.log('4');
})

console.log('5')


//1 3 5 4 2

上面代码有异步任务setTimeout和Promise，因为setTimeout是macrotask（宏任务）Promise是 microtask（微任务），微任务比宏任务优先级高，所以 3 比 2 先打印，当宏任务和微任务都处于 Task Queue 中时，微任务的优先级大于宏任务，即先将微任务执行完，再执行宏任务，先打印了 4 ，再打印了 2

事件循环（Event Loop ）：

浏览器中的各种 Web API 为异步的代码（setTimeOut）提供了一个单独的运行空间，当异步的代码运行完毕以后，会将代码中的回调送入到 Task
Queue（任务队列）中去，等到调用栈空时，再将队列中的回调函数压入调用栈中执行，等到栈空以及任务队列也为空时，调用栈仍然会不断检测任务队列中是否有代码需要执行，这一过程就是完整的