几张动图带你回顾event loop
我要评论
大家好，张动我是图带TianTian。
今天要分享的回顾内容是事件循环event loop。
一个老生常谈的张动问题，之所以拿出来说，图带推荐的回顾原因在于:
通过几张动图的形式，就把这个过程描述清楚了，张动太有趣了。图带
精力有限，回顾图片并非本人制作，张动如有侵权，图带会删除滴～
为什么需要它
JavaScript是回顾单线程的：一次只能运行一个任务。通常，张动这没什么大不了的图带，但是回顾现在想象一下您正在运行一个耗时30秒的任务。在此任务中，我们等待30秒才能进行其他任何操作(默认情况下，JavaScript在浏览器的主线程上运行，因此整个用户界面都被卡住了)。
这样子的体验是不能接受的服务器托管，你不能把时间花在这么一个迟钝的网站。
幸运的是，浏览器为我们提供了JavaScript引擎本身不提供的一些功能：Web API。这包括DOM API，setTimeout，HTTP请求等。这可以帮助我们创建一些异步的，非阻塞的行为。
初次见面
当我们调用一个函数时，它会被添加到一个叫做调用栈的东西中。调用堆栈是JS引擎的一部分，这与浏览器无关。它是一个堆栈，意味着它是先入后出的(想想一堆薄饼)。当一个函数返回一个值时，它被从堆栈中弹出。
流程图1
响应函数返回一个setTimeout函数。setTimeout是由Web API提供给我们的：它让我们在不阻塞主线程的免费源码下载情况下延迟任务。我们传递给setTimeout函数的回调函数，箭头函数()=> { return Hey }被添加到Web API中。同时，setTimeout函数和response函数被从堆栈中弹出，它们都返回了它们的值!
流程图2
在Web API中，定时器的运行时间与我们传递给它的第二个参数一样长，即1000ms。回调并不立即被添加到调用栈中，而是被传递到一个叫做队列的东西中。
流程图3
这可能是一个令人困惑的部分：这并不意味着回调函数在1000ms后被添加到callstack(从而返回一个值)!它只是在1000ms后被添加到队列中。但这是一个队列，该函数必须等待轮到它!
揭开面纱
现在是我们一直在等待的部分，是时候让事件循环完成它唯一的任务了：将队列和调用栈连接起来。如果调用栈是空的，那么如果所有先前调用的函数都已经返回了它们的b2b信息网值，并且已经从栈中弹出，那么队列中的第一个项目就会被添加到调用栈中。在这种情况下，没有其他函数被调用，也就是说，当回调函数成为队列中的第一项时，调用栈是空的。
流程图4
回调被添加到调用堆栈，被调用，并返回一个值，然后被从堆栈中弹出，如图:
流程图5
跑个demo
其实我看完这些动图后，是很能理解作者思路滴，不过，我还是建议初学者，可以跑个例子看看，下面是一个不错的例子:
const foo = () => console.log("First"); const bar = () => setTimeout(() => console.log("Second"), 500); const baz = () => console.log("Third"); bar(); foo(); baz();虽然看起来很简单，嗯，可以尝试搞一下:
打开我们的浏览器，跑一下上面的代码，让我们快速看一下在浏览器中运行此代码时发生的情况：
流程图6
最后今天的分享，主要是用几张动图带回顾了下事件循环机制。
相关文章
电脑QQ时钟错误的原因和解决方法（探究电脑QQ时钟错误的根源，以及如何解决这一问题）
摘要：电脑QQ作为一款广泛使用的社交软件，时钟错误是其中常见的问题之一。当我们的电脑QQ显示的时间不准确时，不仅会影响到我们正常使用软件的便利性，还可能导致错过重要的信息和活动。本文将探...2025-11-04
前言本篇展示了如何在ASP.NET Core应用程序中设置IP白名单验证的2种方式。你可以使用以下2种方式：用于检查每个请求的远程 IP 地址的中间件。 MVC 操作筛选器，用于检查针对2025-11-04
想了解更多内容，请访问：和华为官方合作共建的鸿蒙技术社区https://harmonyos.51cto.com组件间的通信主要作用是能在组件间传递数据或者执行相关的业务逻辑，对于鸿蒙应用组件，下面将对2025-11-04
本文转载自微信公众号「Golang梦工厂」，作者AsongGo 。转载本文请联系Golang梦工厂公众号。背景伴随着微服务架构被宣传得如火如茶，一些概念也被推到了我们的面前。一提到微服务，就离不开这几2025-11-04电脑剪映短剧教程（以电脑剪映为背景，教你制作出精彩的短剧作品）
摘要：视频剪辑已经成为现代人生活中常见的一项技能，通过剪辑，我们可以将生活中的精彩瞬间制作成精美的短剧。而电脑剪映作为一款功能强大且易于上手的剪辑软件，成为了许多人入门剪辑的首选。本文将...2025-11-04
01介绍在之前的两篇文章中，我们已经介绍了使用 gRPC 创建 RPC 应用的前导知识。我们了解到 gRPC 支持多语言，本文我们介绍在 Golang 语言中怎么使用 gRPC。02准备工作既然我们要2025-11-04
最新评论