javascript：事件循环(EventLoop)

听海边涛声

已于 2024-07-15 12:10:40 修改

阅读量239

点赞数 2

文章标签： javascript 开发语言 ecmascript

于 2024-07-15 12:06:58 首次发布

本文链接：https://blog.csdn.net/panghuangang/article/details/140433204

版权

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Event_loop

javascript的并发模型和事件循环：

JavaScript 有一个基于事件循环的并发模型，事件循环负责执行代码、收集和处理事件以及执行队列中的子任务。这个模型与其他语言中的模型截然不同，比如 C 和Java。
事件循环：是执行代码和收集异步任务的模型，在调用栈空闲，反复调用任务队列里面回调函数的执行机制，就叫事件循环。
javascript使用事件循环的原因：javascript是单线程的（某一时刻只能执行一行代码），为了不让耗时的异步代码阻塞其它代码的运行，设计了事件循环模型。

事件循环的模型：
在这里插入图片描述

调用栈：函数调用形成了一个由若干帧组成的栈，可以理解为js代码在运行时形成的调用环境。
js引擎将同步代码推入调用栈执行，将异步代码放入宿主环境。
宿主环境执行后（例如setTimeout的倒计时时间到了），异步代码的回调函数会被放入任务队列排队。
调用栈空闲的时候，会反复从任务队列中查找执行。从最先进入队列的消息开始处理队列中的消息，被处理的消息会被移出队列。

示例：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <script>
    console.log(1)
    setTimeout(() => {
      console.log(2)
    }, 0)
    console.log(3)
    setTimeout(() => {
      console.log(4)
    }, 2000)
    console.log(5)
  </script>
</body>

</html>