javasc++ript 是最流行的编程语言之一，为网络上90% 的网站提供支持！但是，最棘手和最容易被误解的概念之一是事件循环的工作原理。这是事件循环、任务队列、调用堆栈、微任务队列和 web api 的简单解释。
javascript 有何特别之处？
javascript 是一种单线程语言。这意味着它一次处理一件事，与 c++ 或 go 等语言不同，后者可以同时处理多个事情。为了使诸如获取数据或运行计时器之类的异步任务顺利进行，javascript 使用了称为 事件循环！
的东西
1. 什么是 web api？
web api 是浏览器或 node.js 提供的额外工具，用于处理诸如发出网络请求（使用 fetch）、设置计时器（settimeout）或访问用户位置（使用 地理定位 api）。这些任务在主 javascript 线程之外运行。
示例：
settimeout(() => { console.log("timer done!");}, 2000);
登录后复制
在这里，浏览器处理计时器，同时主 javascript 继续运行其他代码。
2.什么是任务队列？
任务队列 是来自 web api、事件侦听器和其他延迟操作的回调函数等待 javascript 准备好运行它们的地方。这些任务排队等候。
立即学习“Java免费学习笔记（深入）”；
将其想象为商店里的排队等候，当 javascript 完成当前任务时，每个任务都会由事件循环处理。
3.什么是调用堆栈？
调用堆栈 是 javascript 跟踪函数调用的地方。当你调用一个函数时，它会被压入堆栈。完成后，它就会弹出。 javascript 按照任务在堆栈中出现的顺序处理任务，它本质上是同步的。
4.什么是事件循环？
事件循环就像一名交通员，让一切保持运转。它不断检查调用堆栈是否为空，如果为空，则将任务从任务队列或微任务队列移动到堆栈中执行。这就是让 javascript 处理异步代码而不会阻塞主线程。
的原因
事件循环的实际示例
settimeout(() => { console.log("2000ms");}, 2000);settimeout(() => { console.log("100ms");}, 100);console.log("end");
登录后复制
这里发生了什么？
让我们来分解一下：
“end”会立即记录，因为它是同步的并且在调用堆栈中运行。100ms 的 settimeout 由 web api 处理。 100ms后，其回调移动到任务队列。2000ms 的 settimeout 的作用是一样的，但是它的回调在 2000ms 后移动到 任务队列。事件循环首先将 100ms 回调移动到 调用堆栈，然后是 2000ms 回调。
5.什么是微任务队列？
微任务队列是一个特殊的队列，用于在任务队列之前处理的任务。微任务来自 promises 或突变观察者之类的东西。事件循环始终在任务队列之前检查微任务队列。
带有 promise 的微任务示例
console.log("start");settimeout(() => { console.log("timeout");}, 0);promise.resolve().then(() => { console.log("promise");});console.log("end");
登录后复制
这里发生了什么？
“开始”立即被记录。settimeout回调被放置在任务队列中。promise 决议被放置在 微任务队列中。“结束”已记录。事件循环检查微任务队列，执行promise回调。最后任务队列处理settimeout回调。
输出：
StartEndPromiseTimeout
登录后复制
视觉表现
总结一切
以下是所有内容的组合方式：
web api 处理异步任务，例如主线程之外的计时器。事件循环将任务从任务队列或微任务队列移动到调用堆栈。微任务（如承诺）首先处理，然后再处理任务队列中的任务。
以上就是了解 JavaScript 中的事件循环 — 变得简单！的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2664353.html
