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

事件循環

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

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]刪除
最新教學 更多>
  • 您如何在Laravel Blade模板中定義變量?
    您如何在Laravel Blade模板中定義變量?
    在Laravel Blade模板中使用Elegance 在blade模板中如何分配變量對於存儲以後使用的數據至關重要。在使用“ {{}}”分配變量的同時,它可能並不總是最優雅的解決方案。 幸運的是,Blade通過@php Directive提供了更優雅的方法: $ old_section =...
    程式設計 發佈於2025-07-16
  • 為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    為什麼儘管有效代碼,為什麼在PHP中捕獲輸入?
    在php ;?>" method="post">The intention is to capture the input from the text box and display it when the submit button is clicked.但是,輸出...
    程式設計 發佈於2025-07-16
  • Java字符串非空且非null的有效檢查方法
    Java字符串非空且非null的有效檢查方法
    檢查字符串是否不是null而不是空的 if(str!= null && str.isementy())二手: if(str!= null && str.length()== 0) option 3:trim()。 isement(Isement() trim whitespace whites...
    程式設計 發佈於2025-07-16
  • 如何高效地在一個事務中插入數據到多個MySQL表?
    如何高效地在一個事務中插入數據到多個MySQL表?
    mySQL插入到多個表中,該數據可能會產生意外的結果。雖然似乎有多個查詢可以解決問題,但將從用戶表的自動信息ID與配置文件表的手動用戶ID相關聯提出了挑戰。 使用Transactions和last_insert_id() 插入用戶(用戶名,密碼)值('test','tes...
    程式設計 發佈於2025-07-16
  • 如何在鼠標單擊時編程選擇DIV中的所有文本?
    如何在鼠標單擊時編程選擇DIV中的所有文本?
    在鼠標上選擇div文本單擊帶有文本內容,用戶如何使用單個鼠標單擊單擊div中的整個文本?這允許用戶輕鬆拖放所選的文本或直接複製它。 在單個鼠標上單擊的div元素中選擇文本,您可以使用以下Javascript函數: function selecttext(canduterid){ if(d...
    程式設計 發佈於2025-07-16
  • CSS強類型語言解析
    CSS強類型語言解析
    您可以通过其强度或弱输入的方式对编程语言进行分类的方式之一。在这里,“键入”意味着是否在编译时已知变量。一个例子是一个场景,将整数(1)添加到包含整数(“ 1”)的字符串: result = 1 "1";包含整数的字符串可能是由带有许多运动部件的复杂逻辑套件无意间生成的。它也可以是故意从单个真理...
    程式設計 發佈於2025-07-16
  • 如何使用PHP將斑點(圖像)正確插入MySQL?
    如何使用PHP將斑點(圖像)正確插入MySQL?
    essue VALUES('$this->image_id','file_get_contents($tmp_image)')";This code builds a string in PHP, but the function call fil...
    程式設計 發佈於2025-07-16
  • PHP陣列鍵值異常:了解07和08的好奇情況
    PHP陣列鍵值異常:了解07和08的好奇情況
    PHP數組鍵值問題,使用07&08 在給定數月的數組中,鍵值07和08呈現令人困惑的行為時,就會出現一個不尋常的問題。運行print_r($月份)返回意外結果:鍵“ 07”丟失,而鍵“ 08”分配給了9月的值。 此問題源於PHP對領先零的解釋。當一個數字帶有0(例如07或08)的前綴時,PHP...
    程式設計 發佈於2025-07-16
  • 如何從Google API中檢索最新的jQuery庫?
    如何從Google API中檢索最新的jQuery庫?
    從Google APIS 問題中提供的jQuery URL是版本1.2.6。對於檢索最新版本,以前有一種使用特定版本編號的替代方法,它是使用以下語法:獲取最新版本:未壓縮)While these legacy URLs still remain in use, it is recommended ...
    程式設計 發佈於2025-07-16
  • 如何使用Depimal.parse()中的指數表示法中的數字?
    如何使用Depimal.parse()中的指數表示法中的數字?
    在嘗試使用Decimal.parse(“ 1.2345e-02”中的指數符號表示法表示的字符串時,您可能會遇到錯誤。這是因為默認解析方法無法識別指數符號。 成功解析這樣的字符串,您需要明確指定它代表浮點數。您可以使用numbersTyles.Float樣式進行此操作,如下所示:[&& && && ...
    程式設計 發佈於2025-07-16
  • 為什麼使用固定定位時,為什麼具有100%網格板柱的網格超越身體?
    為什麼使用固定定位時,為什麼具有100%網格板柱的網格超越身體?
    網格超過身體,用100%grid-template-columns 為什麼在grid-template-colms中具有100%的顯示器,當位置設置為設置的位置時,grid-template-colly修復了? 問題: 考慮以下CSS和html: class =“ snippet-code”> ...
    程式設計 發佈於2025-07-16
  • 大批
    大批
    [2 數組是對象,因此它們在JS中也具有方法。 切片(開始):在新數組中提取部分數組,而無需突變原始數組。 令ARR = ['a','b','c','d','e']; // USECASE:提取直到索引作...
    程式設計 發佈於2025-07-16
  • 在Ubuntu/linux上安裝mysql-python時,如何修復\“ mysql_config \”錯誤?
    在Ubuntu/linux上安裝mysql-python時,如何修復\“ mysql_config \”錯誤?
    mysql-python安裝錯誤:“ mysql_config找不到”“ 由於缺少MySQL開發庫而出現此錯誤。解決此問題,建議在Ubuntu上使用該分發的存儲庫。使用以下命令安裝Python-MysqldB: sudo apt-get安裝python-mysqldb sudo pip in...
    程式設計 發佈於2025-07-16
  • 在GO中構造SQL查詢時,如何安全地加入文本和值?
    在GO中構造SQL查詢時,如何安全地加入文本和值?
    在go中構造文本sql查詢時,在go sql queries 中,在使用conting and contement和contement consem per時,尤其是在使用integer per當per當per時,per per per當per. 在GO中實現這一目標的慣用方法是使用fmt.spr...
    程式設計 發佈於2025-07-16
  • 如何在Java字符串中有效替換多個子字符串?
    如何在Java字符串中有效替換多個子字符串?
    在java 中有效地替換多個substring,需要在需要替換一個字符串中的多個substring的情況下,很容易求助於重複應用字符串的刺激力量。 However, this can be inefficient for large strings or when working with nu...
    程式設計 發佈於2025-07-16

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

Copyright© 2022 湘ICP备2022001581号-3