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

最新推荐文章于 2023-05-15 16:55:01 发布

斜光

最新推荐文章于 2023-05-15 16:55:01 发布

阅读量224

点赞数

分类专栏：前端技术笔记

本文链接：https://blog.csdn.net/weixin_44145258/article/details/106808306

版权

前端技术笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

什么是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是通过用户点击触发

斜光

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS异步全解01：初识event-loop 事件循环

什么是event-loopjs是单线程，异步需要基于回调来实现event-loop就是异步回调的实现原理例如setTimeoutconsole.log(1);setTimeout(function cb1() { console.log(2);}, 0);console.log(3)132js代码是如何执行的从前往后，一行行放在call stack里执行如果一行报错，下面的代码停止执行先执行完所有同步代码，再执行异步代码遇到异步先放入异步队列，等待时机同步代码
复制链接

扫一扫