」工欲善其事,必先利其器。「—孔子《論語.錄靈公》
首頁 > 程式設計 > 事件循環

事件循環

發佈於2024-08-23
瀏覽:814

Event Loop

介绍
JavaScript 主要在 Node.js 和浏览器中的单个线程上执行(有一些例外,例如工作线程,这超出了当前文章的范围)。在这篇文章中,我将尝试解释 Node.js 的并发机制,即事件循环。

在开始阅读本文之前,您应该熟悉堆栈及其工作原理,我过去写过这个想法,所以请查看堆栈和堆 — 不要在不了解它们的情况下开始编码 — Moshe Binieli |中等的

介绍图片
示例
我相信通过示例学习是最好的,因此我将从 4 个简单的代码示例开始。我将分析示例,然后深入探讨 Node.js 的架构。

示例1:
控制台.log(1);
控制台.log(2);
控制台.log(3);
// 输出:
// 1
// 2
// 3
这个例子很简单,第一步console.log(1)进入调用堆栈,被执行然后删除,第二步console.log(2)进入调用堆栈,被执行然后删除,以此类推 console.log(3).

示例 1 的调用堆栈可视化
示例2:
控制台.log(1);
setTimeout(函数 foo(){
控制台.log(2);
}, 0);
控制台.log(3);
// 输出:
// 1
// 3
// 2
在这个例子中我们可以看到我们立即运行setTimeout,所以我们期望console.log(2)在console.log(3)之前,但事实并非如此,让我们了解其背后的机制。

基本事件循环架构(稍后我们将深入探讨)

Stack & Heap:查看我关于此的文章(我在本文开头添加了链接)
Web API:它们内置于您的 Web 浏览器中,能够公开来自浏览器和周围计算机环境的数据,并用它执行有用的复杂操作。它们不是 JavaScript 语言本身的一部分,而是构建在核心 JavaScript 语言之上,为您提供在 JavaScript 代码中使用的额外超能力。例如,Geolocation API 提供了一些简单的 JavaScript 构造来检索位置数据,因此您可以说,在 Google 地图上绘制您的位置。在后台,浏览器实际上使用一些复杂的低级代码(例如 C )与设备的 GPS 硬件(或任何可用于确定位置数据的硬件)进行通信,检索位置数据,并将其返回到浏览器环境以使用在你的代码中。但同样,这种复杂性已被 API 抽象化。
事件循环和回调队列:完成Web API执行的函数将被移动到回调队列,这是一个常规队列数据结构,事件循环负责将下一个函数从回调队列中出队并将该函数发送到执行函数的调用堆栈。
执行顺序

当前位于调用堆栈中的所有函数都会被执行,然后它们会从调用堆栈中弹出。
当调用堆栈为空时,所有排队的任务都会一一弹出到调用堆栈中并执行,然后从调用堆栈中弹出。
让我们来理解示例 2

console.log(1)方法被调用并放置在调用堆栈上并被执行。

  1. setTimeout 方法被调用并放置在调用堆栈上并被执行,此执行创建一个对 setTimeout Web Api 的新调用,持续 0 毫秒,当它完成时(立即,或者更准确地说,那么它会最好说“尽快”)Web Api 将调用移至回调队列。

  2. console.log(3)方法被调用并放置在调用堆栈上并被执行。

  3. Event Loop发现Call Stack为空,从Callback Queue中取出“foo”方法放入Call Stack,然后执行console.log(2)。

示例 2 的过程可视化
所以setTimeout(function,delay)中的delay参数并不代表函数执行后的精确时间延迟。它代表等待的最短时间,之后在某个时间点将执行该函数。

示例3:
控制台.log(1);
setTimeout(函数 foo() {
console.log('foo');
}, 3500);
setTimeout(函数 boo() {
console.log(‘嘘’);
}, 1000);
控制台.log(2);
// 输出:
// 1
// 2
// '嘘'
// 'foo'

示例 3 的过程可视化
例4:
控制台.log(1);
setTimeout(函数 foo() {
console.log('foo');
}, 6500);
setTimeout(函数 boo() {
console.log(‘嘘’);
}, 2500);
setTimeout(函数 baz() {
console.log(‘baz’);
}, 0);
for ([‘A’, ‘B’] 的 const 值) {
console.log(值);
}
函数二() {
控制台.log(2);
}
二();
// 输出:
// 1
// 'A'
// 'B'
// 2
// '巴兹'
// '嘘'
// 'foo'

示例 4 的过程可视化
事件循环继续执行任务队列中等待的所有回调。任务队列内部,任务大致分为两类,即微任务和宏任务。

宏任务(任务队列)和微任务
更准确地说,实际上有两种类型的队列。

  1. 宏任务队列(或简称任务队列)。
  2. 微任务队列。

还有一些任务进入宏任务队列和微任务队列,但我将介绍常见的任务。

常见的宏任务有 setTimeout、setInterval 和 setImmediate。
常见的微任务有 process.nextTick 和 Promise 回调。
执行顺序
当前位于调用堆栈中的所有函数都会被执行,然后它们会从调用堆栈中弹出。
当调用堆栈为空时,所有排队的微任务都会一一弹出到调用堆栈中并执行,然后从调用堆栈中弹出。
当调用栈和微任务队列都为空时,所有排队的宏任务都会一一弹出到调用栈中并执行,然后从调用栈中弹出。
例5:
控制台.log(1);
setTimeout(函数 foo() {
console.log('foo');
}, 0);
Promise.resolve()
.then(函数 boo() {
console.log(‘嘘’);
});
控制台.log(2);
// 输出:
// 1
// 2
// '嘘'
// 'foo'
console.log(1) 方法被调用并放置在调用堆栈上并被执行。
SetTimeout 正在执行,console.log(‘foo’) 被移至 SetTimeout Web Api,0 毫秒后移至宏任务队列。
Promise.resolve() 正在被调用,正在被解析,然后 .then() 方法被移动到微任务队列。
console.log(2) 方法被调用并放置在调用堆栈上并被执行。
Event Loop 发现调用堆栈为空,它首先从 Micro-Task 队列中取出任务,即 Promise 任务,将 console.log('boo') 放在调用堆栈上并执行它。
事件循环看到调用堆栈为空,然后看到微任务为空,然后从宏任务队列中取出下一个任务,即 SetTimeout 任务,放入 console.log('foo')在调用堆栈上并执行它。

示例 5 的过程可视化
对事件循环的高级理解
我正在考虑写一篇关于事件循环机制如何工作的底层文章,它本身可以是一篇文章,所以我决定介绍该主题并附上深入解释该主题的良好链接。

事件循环底层解释
当 Node.js 启动时,它会初始化事件循环,处理提供的输入脚本(或放入 REPL),这可能会进行异步 API 调用、调度计时器或调用 process.nextTick(),然后开始处理事件循环。

下图显示了事件循环操作顺序的简化概述。 (每个框将被称为事件循环的一个“阶段”,请查看介绍图片以更好地理解循环。)

事件循环操作顺序的简化概述
每个阶段都有一个要执行的回调的 FIFO 队列(我在这里小心地说,因为根据实现的不同,可能会有其他数据结构)。虽然每个阶段都有其特殊之处,但通常,当事件循环进入给定阶段时,它将执行特定于该阶段的任何操作,然后执行该阶段队列中的回调,直到队列耗尽或达到最大回调数已执行。当队列耗尽或达到回调限制时,事件循环将进入下一阶段,依此类推。

阶段概述
计时器:此阶段执行由 setTimeout() 和 setInterval() 安排的回调。
挂起的回调:执行延迟到下一个循环迭代的 I/O 回调。
空闲,准备:仅内部使用。
Poll:检索新的I/O事件;执行 I/O 相关回调(几乎所有回调,关闭回调、计时器调度的回调和 setImmediate() 除外);节点会在适当的时候阻塞在这里。
检查:此处调用了 setImmediate() 回调。
关闭回调:一些关闭回调,例如socket.on('关闭', ...).
前面的步骤如何适合这里?
因此,前面仅使用“回调队列”,然后使用“宏和微队列”的步骤是关于事件循环如何工作的抽象解释。

还有一件重要的事情要提,事件循环应该在处理宏任务队列中的一个宏任务之后完全处理微任务队列。

第1步:事件循环将循环时间更新为当前执行的当前时间。
第2步:执行微队列。
步骤 3:执行计时器阶段的任务。
第四步:检查微队列中是否有东西,如果有则执行整个微队列。
步骤5:返回步骤3,直到Timers阶段为空。
步骤 6:执行 Pending Callbacks 阶段的任务。
步骤7:检查微队列中是否有东西,如果有则执行整个微队列。
步骤8:返回步骤6,直到Pending Callbacks阶段为空。
然后空闲…微队列…轮询…微队列…检查…微队列…关闭回调然后重新开始。
因此,我很好地概述了事件循环在幕后如何实际工作,有很多遗漏的部分我在这里没有提到,因为实际文档在解释它方面做得很好,我将提供很好的链接文档,我鼓励您花 10-20 分钟来理解它们。

版本聲明 本文轉載於:https://dev.to/atulnagose1499/event-loop-4fck?1如有侵犯,請聯絡[email protected]刪除
最新教學 更多>
  • 為什麼不使用CSS`content'屬性顯示圖像?
    為什麼不使用CSS`content'屬性顯示圖像?
    在Firefox extemers屬性為某些圖像很大,&& && && &&華倍華倍[華氏華倍華氏度]很少見,卻是某些瀏覽屬性很少,尤其是特定於Firefox的某些瀏覽器未能在使用內容屬性引用時未能顯示圖像的情況。這可以在提供的CSS類中看到:。 googlepic { 內容:url(&...
    程式設計 發佈於2025-05-10
  • Async Void vs. Async Task在ASP.NET中:為什麼Async Void方法有時會拋出異常?
    Async Void vs. Async Task在ASP.NET中:為什麼Async Void方法有時會拋出異常?
    在ASP.NET async void void async void void void void void的設計無需返回asynchroncon而無需返回任務對象。他們在執行過程中增加未償還操作的計數,並在完成後減少。在某些情況下,這種行為可能是有益的,例如未期望或明確預期操作結果的火災和...
    程式設計 發佈於2025-05-10
  • 版本5.6.5之前,使用current_timestamp與時間戳列的current_timestamp與時間戳列有什麼限制?
    版本5.6.5之前,使用current_timestamp與時間戳列的current_timestamp與時間戳列有什麼限制?
    在時間戳列上使用current_timestamp或MySQL版本中的current_timestamp或在5.6.5 此限制源於遺留實現的關注,這些限制需要對當前的_timestamp功能進行特定的實現。 創建表`foo`( `Productid` int(10)unsigned not ...
    程式設計 發佈於2025-05-10
  • 如何在Java的全屏獨家模式下處理用戶輸入?
    如何在Java的全屏獨家模式下處理用戶輸入?
    Handling User Input in Full Screen Exclusive Mode in JavaIntroductionWhen running a Java application in full screen exclusive mode, the usual event ha...
    程式設計 發佈於2025-05-10
  • 在細胞編輯後,如何維護自定義的JTable細胞渲染?
    在細胞編輯後,如何維護自定義的JTable細胞渲染?
    在JTable中維護jtable單元格渲染後,在JTable中,在JTable中實現自定義單元格渲染和編輯功能可以增強用戶體驗。但是,至關重要的是要確保即使在編輯操作後也保留所需的格式。 在設置用於格式化“價格”列的“價格”列,用戶遇到的數字格式丟失的“價格”列的“價格”之後,問題在設置自定義單元...
    程式設計 發佈於2025-05-10
  • Go語言如何動態發現導出包類型?
    Go語言如何動態發現導出包類型?
    與反射軟件包中的有限類型的發現能力相反,本文探索了替代方法,探索了在Runruntime。 go import( “ FMT” “去/進口商” ) func main(){ pkg,err:= incorter.default()。導入(“ time”) 如果er...
    程式設計 發佈於2025-05-10
  • 哪種在JavaScript中聲明多個變量的方法更可維護?
    哪種在JavaScript中聲明多個變量的方法更可維護?
    在JavaScript中聲明多個變量:探索兩個方法在JavaScript中,開發人員經常遇到需要聲明多個變量的需要。對此的兩種常見方法是:在單獨的行上聲明每個變量: 當涉及性能時,這兩種方法本質上都是等效的。但是,可維護性可能會有所不同。 第一個方法被認為更易於維護。每個聲明都是其自己的語句,使...
    程式設計 發佈於2025-05-10
  • 為什麼使用固定定位時,為什麼具有100%網格板柱的網格超越身體?
    為什麼使用固定定位時,為什麼具有100%網格板柱的網格超越身體?
    網格超過身體,用100%grid-template-columns 為什麼在grid-template-colms中具有100%的顯示器,當位置設置為設置的位置時,grid-template-colly修復了? 問題: 考慮以下CSS和html: class =“ snippet-code”> ...
    程式設計 發佈於2025-05-10
  • 如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    如何為PostgreSQL中的每個唯一標識符有效地檢索最後一行?
    postgresql:為每個唯一標識符在postgresql中提取最後一行,您可能需要遇到與數據集合中每個不同標識的信息相關的信息。考慮以下數據:[ 1 2014-02-01 kjkj 在數據集中的每個唯一ID中檢索最後一行的信息,您可以在操作員上使用Postgres的有效效率: id dat...
    程式設計 發佈於2025-05-10
  • 如何限制動態大小的父元素中元素的滾動範圍?
    如何限制動態大小的父元素中元素的滾動範圍?
    在交互式接口中實現垂直滾動元素的CSS高度限制問題:考慮一個佈局,其中我們具有與用戶垂直滾動一起移動的可滾動地圖div,同時與固定的固定sidebar保持一致。但是,地圖的滾動無限期擴展,超過了視口的高度,阻止用戶訪問頁面頁腳。 $("#map").css({ margin...
    程式設計 發佈於2025-05-10
  • 如何將PANDAS DataFrame列轉換為DateTime格式並按日期過濾?
    如何將PANDAS DataFrame列轉換為DateTime格式並按日期過濾?
    Transform Pandas DataFrame Column to DateTime FormatScenario:Data within a Pandas DataFrame often exists in various formats, including strings.使用時間數據時...
    程式設計 發佈於2025-05-10
  • Go語言垃圾回收如何處理切片內存?
    Go語言垃圾回收如何處理切片內存?
    Garbage Collection in Go Slices: A Detailed AnalysisIn Go, a slice is a dynamic array that references an underlying array.使用切片時,了解垃圾收集行為至關重要,以避免潛在的內存洩...
    程式設計 發佈於2025-05-10
  • Python不會對超範圍子串切片報錯的原因
    Python不會對超範圍子串切片報錯的原因
    在python中用索引切片範圍:二重性和空序列索引單個元素不同,該元素會引起錯誤,切片在序列的邊界之外沒有。 這種行為源於索引和切片之間的基本差異。索引一個序列,例如“示例” [3],返回一個項目。但是,切片序列(例如“示例” [3:4])返回項目的子序列。 索引不存在的元素時,例如“示例” [9...
    程式設計 發佈於2025-05-10
  • Java中如何使用觀察者模式實現自定義事件?
    Java中如何使用觀察者模式實現自定義事件?
    在Java 中創建自定義事件的自定義事件在許多編程場景中都是無關緊要的,使組件能夠基於特定的觸發器相互通信。本文旨在解決以下內容:問題語句我們如何在Java中實現自定義事件以促進基於特定事件的對象之間的交互,定義了管理訂閱者的類界面。 以下代碼片段演示瞭如何使用觀察者模式創建自定義事件: args...
    程式設計 發佈於2025-05-10
  • Python中何時用"try"而非"if"檢測變量值?
    Python中何時用"try"而非"if"檢測變量值?
    使用“ try“ vs.” if”來測試python 在python中的變量值,在某些情況下,您可能需要在處理之前檢查變量是否具有值。在使用“如果”或“ try”構建體之間決定。 “ if” constructs result = function() 如果結果: 對於結果: ...
    程式設計 發佈於2025-05-10

免責聲明: 提供的所有資源部分來自互聯網,如果有侵犯您的版權或其他權益,請說明詳細緣由並提供版權或權益證明然後發到郵箱:[email protected] 我們會在第一時間內為您處理。

Copyright© 2022 湘ICP备2022001581号-3