第20天:活动循环
#javascript #100daysofcode #day20

ð事件循环是什么?

事件循环是JavaScript运行时环境的关键组成部分,它可以在不阻止主线程的情况下实现异步行为。它不断检查消息队列是否已待处理任务,并一一处理它们,以确保您的应用程序保持响应能力。

事件环阶段

  • 呼叫堆栈
    呼叫堆栈是记录函数执行上下文的数据结构。当调用函数时,将其添加到堆栈顶部,并且完成后,将其从堆栈中取出。

  • Web API
    Web API由浏览器或JavaScript运行的环境提供。它们包括Settimeout,SetInterval,DOM事件(单击,滚动等),获取等功能。

  • 消息队列
    消息队列保留由Web API发送的任务。每个任务都由一个回调函数组成,等待执行。

  • 事件循环
    事件循环连续检查呼叫堆栈和消息队列。如果呼叫堆栈为空,则将任务从消息队列移动到呼叫堆栈进行执行。

ð·示例

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

信用:Lydia Hallie

这是JS视觉执行:view here

Image description

ðâ解释

  • 首先,称为bar()函数。此函数包含SettiMeout,这是一个异步函数。它计划在延迟500毫秒后安排其回调功能( second )。事件循环将此任务添加到消息队列并继续。
  • 接下来,称为foo()函数。它立即将其记录到控制台并返回。
  • 之后,称为baz()函数,该功能将第三立即记录到控制台并返回。
  • 现在,呼叫堆栈为空,事件循环开始处理消息队列中的任务。
  • 事件循环从消息队列中挑选第一个任务,这是bar()函数的SettiMeout的回调函数。回调日志第二个到控制台。

ð作业

  1. 任务队列和微型任务队列有什么区别?
  2. 给我以Micro&Macro Task队列为例。

在评论部分中写下答案