事件循环机制

珊珊而川

已于 2024-05-02 20:04:27 修改

阅读量922

点赞数 15

文章标签： javascript

于 2024-04-23 23:03:13 首次发布

本文链接：https://blog.csdn.net/weixin_63681863/article/details/138140384

版权

在这里插入图片描述

js是单线程，不能处理异步，但是浏览器可以处理异步

事件循环（Event Loop）的执行顺序。在 JavaScript 中，事件循环是用来处理异步操作的机制。它由一个调用栈（Call Stack）和一个任务队列（Task Queue）组成。

调用栈：用于追踪代码的执行位置。当你调用一个函数时，它会被推入调用栈中。当函数执行完成后，会从调用栈中弹出。
任务队列：用于存储待执行的异步任务。这些任务可能是由 Web API 提供的，比如定时器（setTimeout、setInterval）、事件处理函数等。当异步任务完成后，会被放入任务队列中。

事件循环的执行过程大致如下：

所以，你可以理解为先执行调用栈中的任务，然后再执行任务队列中的任务。这样的机制确保了 JavaScript 的单线程执行模型，同时能够处理异步操作。

当我们谈论 JavaScript 中的任务队列和事件循环时，我们其实在谈论 JavaScript 异步编程的核心概念。JavaScript 是一种单线程语言，这意味着它一次只能执行一个任务。但是，JavaScript 允许我们编写异步代码，即使在执行一些耗时操作时也能保持页面的响应性。

任务队列是一种数据结构，用于存储待执行的任务（也称为事件或回调）。这些任务可以是同步的（立即执行），也可以是异步的（稍后执行）。在 JavaScript 中，任务队列被分为两种：宏任务队列（Macrotask Queue）和微任务队列（Microtask Queue）。

宏任务队列：宏任务队列包含一些异步操作，比如 setTimeout、setInterval、DOM 事件回调等。在执行完当前执行栈中的任务后，JavaScript 引擎会去检查宏任务队列，如果队列不为空，则会从队列中选择一个任务来执行，执行完该任务后再回到执行栈中继续执行。
微任务队列：微任务队列包含一些需要尽快执行的任务，比如 Promise 的回调函数、MutationObserver 的回调函数等。微任务队列的优先级高于宏任务队列，即在执行完当前执行栈中的任务后，JavaScript 引擎会首先清空微任务队列中的所有任务，然后再去执行宏任务队列中的任务。

事件循环是 JavaScript 运行时的一个重要组成部分，它负责管理任务队列的执行顺序。事件循环不断地从任务队列中选择任务执行，并且保证了任务的顺序性和及时性。

事件循环的基本流程如下：

执行全局同步代码，生成执行上下文（Execution Context）和调用栈（Call Stack）。
执行栈中的任务，如果遇到异步任务（比如 setTimeout、Promise 等），将其放入相应的任务队列中。
当执行栈中的任务执行完毕后，事件循环开始工作：
- 从微任务队列中取出所有任务依次执行，直到微任务队列为空。
- 从宏任务队列中取出一个任务执行，执行完毕后回到第一步。
重复上述过程，直到所有任务都执行完毕。

希望这个解释对你有所帮助！如果有任何疑问，请随时问我。

所以在任务队列的东西，最终都会到调用栈中，这样理解对吗？
是的，你理解得很正确。在事件循环中，任务队列中的任务最终会被移到调用栈中执行。当调用栈为空时，事件循环会检查任务队列，并将队列中的任务一个一个地放入调用栈中执行。这个过程确保了异步任务在合适的时机被执行，并且不会阻塞主线程。

关注