概述
- JS 是单线程运行的
- 异步要基于回调来实现
- event loop 就是异步回调的实现机制
JS 如何执行
- 从前到后，一行一行执行
- 如果某一行执行报错，则停止下面代码的执行
- 先把同步代码执行完，再执行异步
event loop执行过程
1. 同步代码，一行一行放在call stack 中执行
2. 遇到异步，先“记录”下，等待时间（定时，网络请求等）
3. 时机到了，就移动到 calllback queue
4. 如果call stack 为空（即同步代码执行完），event loop开始工作
5. 轮询查找callback queue，如有则移动到call stack 执行
6. 继续轮询查找（永动机一样）
代码示例
console.log('Hi')
setTimeout(function cb1() {
console.log('cb1') // cb 即 callback
}, 5000)
console.log('Bye')
代码执行过程：
1. 将 console.log("Hi") 推入调用栈，调用栈会执行代码
2. 执行代码，控制台打印“Hi”，调用栈清空
3. 执行 setTimeout，setTimeout由浏览器定义，不是ES6的内容；将定时器放到Web APIs中，到时间后将回调函数放到回调函数队列中
4. 执行完了setTimeout， 清空调用栈
5. console.log("Bye")进入调用栈，执行，调用栈清空
6. 同步代码被执行完,，回调栈空，浏览器内核启动时间循环机制
7. 五秒之后，定时器将cb1推到回调函数队列中
8. 事件循环将cb1放入调用栈
DOM 事件，也用 event loop
DOM 事件不是异步，只是用了回调的方式，然后会用到 event loop
<button id="btn1">提交</button>
<script>
console.log('Hi')
$('#btn1').click(function (e) {
console.log('button clicked')
})
console.log('Bye')
</script>