JS异步全解01：初步认识 event-loop 事件循环

2020-07-29 551 阅读1分钟

什么是event-loop

js是单线程，异步需要基于回调来实现
event-loop就是异步回调的实现原理

例如setTimeout

console.log(1);
setTimeout(function cb1() {
  console.log(2);
}, 0);

console.log(3)
1
3
2

js代码是如何执行的

在这里插入图片描述

从前往后，一行行放在call stack里执行如果一行报错，下面的代码停止执行
先执行完所有同步代码，再执行异步代码遇到异步先放入异步队列，等待时机
同步代码一旦执行完call-stack为空，就触发event-loop事件循环机制
1. event-loop不断循环，去回调函数队列中判断是否存在回调函数
2. 例如web-api中的定时器到时间后，就将回调函数推入这个队列中
3. event-loop判断存在函数就出队执行这个函数
4. 函数体中的内容被放入call-stack中执行
5. 重复以上步骤

DOM事件和Event-loop

<body>
    <button onclick="fn()">提交</button>
</body>
<script>
    console.log(1);
    function fn() {
        console.log(2);
    }
    console.log(3);
</script>

例如以上DOM点击事件本质上也是基于event-loop的回调，只是触发的时机不一样定时器是通过时间触发，DOM是通过用户点击触发