[JavaScript] 究竟什麼是Event loop?

更新 發佈閱讀 4 分鐘
setTimeout(function(){console.log('delay 0 sec')}, 0)
console.log('Hello!')

執行以上程式碼,然後看到了這個結果:

vocus|新世代的創作平台

為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位?

利用AC教材提供的youtube演講連結一窺究竟:

演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的文件,大致可以回答。


JavaScript 的並行模型(concurrency model)是基於「事件循環(event loop)」。

視覺化呈現(Visual representation)

vocus|新世代的創作平台

堆疊(Stack)

呼叫函式(Function)會形成一個 frame 的堆疊。
function foo(b) {
var a = 10;
return a + b + 11;
}

function bar(x) {
var y = 3;
return foo(x * y);
}

console.log(bar(7));

當呼叫 bar 時,會產生一個含有 bar 的參數及區域變數的 frame,而在 bar 呼叫了 foo 時,含有 foo 參數及變數的第二個 frame 就會被置於堆疊的最上面。當 foo 回傳後,最上面的 frame 會被抽離堆疊(僅留下 bar 的呼叫 frame)。然後當 bar 返回之後,堆疊就會清空。

堆積(Heap)

物件被分配在一個堆積中,一個只表示記憶體中的一個無結構的大區域。

佇列(Queue)

JavaScript 執行環境包含一個訊息佇列,裡面是待處理的訊息,其中每個訊息都與一個 function 相關聯。當堆疊中有足夠空間時,會從訊息佇列拿取一個訊息進行處理,處理過程包含了呼叫相關聯的 function。只有當堆疊清空時,該訊息才算是完成處理。


事件循環(Event Loop)

第一行console程式碼被執行,排到stack上,很快的被印出。

vocus|新世代的創作平台

第二行的setTimeout函式並不在V8引擎中運作,在瀏覽器之下必須類似由外頭呼叫的方式進行,其他像DOM、AJAX也都為此方式進行。呼叫後不會直接被推到stack區,會先在webapis區等待設定的延遲秒數,

vocus|新世代的創作平台

此時第三行的console也會被推到stack區,跟著馬上被印出。此時setTimeout函式還在等待時間。

vocus|新世代的創作平台

時間到達設定秒數後,setTimeout函式內要執行的事情會被放到task queue區,此queue必須要等到stack區完全被清空,才會往stack區堆放執行。

vocus|新世代的創作平台
vocus|新世代的創作平台

此狀況即使把延遲秒數設定為0依然成立,原因為:

「零延遲」並非意味著回呼函式(callback function)會在 0 毫秒之後立刻執行。當使用延遲 0 毫秒參數來呼叫 setTimeout (en-US) 函式並非是程式會過了該段時間就會執行,而是會參考佇列中等待的訊息數量。 在下面範例中,「this is just a message」會寫在 setTimeout 的回呼訊息被執行之前,因為該時間段參數是要求執行環境處理所需的最少等待時間,而非一個保證時間。
vocus|新世代的創作平台

由於console.log走的路徑和setTimeout不同,造成即使先寫出setTimeout程式碼,印出的順序依然會以單純直接console.log為先,setTimeout為後,無論延遲秒數的設定為何。




留言
avatar-img
SUPOAN的沙龍
4會員
5內容數
SUPOAN的沙龍的其他內容
2022/10/29
OBJECTIVE 2-2的課程很紮實,前面的課程的作業算是只要做出一些基本功能即可,2-2會有不斷優化先前作業的練習,尤其以電影清單以及社群頁面,同時練到bootstrap、DOM,等於網頁三劍客直接融合起來練兵,還滿過癮的,也算做出了一個稍微像樣一點的網頁功能,尤其搜尋功能和分頁功能的渲染,都更
2022/10/29
OBJECTIVE 2-2的課程很紮實,前面的課程的作業算是只要做出一些基本功能即可,2-2會有不斷優化先前作業的練習,尤其以電影清單以及社群頁面,同時練到bootstrap、DOM,等於網頁三劍客直接融合起來練兵,還滿過癮的,也算做出了一個稍微像樣一點的網頁功能,尤其搜尋功能和分頁功能的渲染,都更
2022/08/15
很感謝Andy和Bible兩位在日本工作的前輩,分享海外工作的一些觀念跟他們各自的人生經歷,真的獲益匪淺。 首先Andy先點出了聊到出國工作,哪些問題先必須問問自己的: Why: 為什麼要出國? What: 想要得到什麼?哪個產業?做什麼工作? Where: 去哪個地區?哪個城市?哪間公司? 語言
Thumbnail
2022/08/15
很感謝Andy和Bible兩位在日本工作的前輩,分享海外工作的一些觀念跟他們各自的人生經歷,真的獲益匪淺。 首先Andy先點出了聊到出國工作,哪些問題先必須問問自己的: Why: 為什麼要出國? What: 想要得到什麼?哪個產業?做什麼工作? Where: 去哪個地區?哪個城市?哪間公司? 語言
Thumbnail
2022/08/10
先說學期2-1完課的整體感覺: 非常精彩刺激!
Thumbnail
2022/08/10
先說學期2-1完課的整體感覺: 非常精彩刺激!
Thumbnail
看更多
你可能也想看
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
簡要說明 JavaScript 的 Event Loop JavaScript 是單執行緒 (single-threaded) 語言,這意味著它一次只能執行一件事,因此所有函式都需要排隊等待執行,這被稱為同步 (synchronous)。在同步操作中,若函式過多或過於複雜,會導致程式阻塞 (blo
Thumbnail
簡要說明 JavaScript 的 Event Loop JavaScript 是單執行緒 (single-threaded) 語言,這意味著它一次只能執行一件事,因此所有函式都需要排隊等待執行,這被稱為同步 (synchronous)。在同步操作中,若函式過多或過於複雜,會導致程式阻塞 (blo
Thumbnail
介紹 委派的非同步方法 可以透過BeginInvoke執行委派的非同步方法 Action<T>.BeginInvoke(<T> obj,AsyncCallback callback,Object @object) 第一個內容的 obj,只的是要傳入acction委派的參數 第二個AsyncCallb
Thumbnail
介紹 委派的非同步方法 可以透過BeginInvoke執行委派的非同步方法 Action<T>.BeginInvoke(<T> obj,AsyncCallback callback,Object @object) 第一個內容的 obj,只的是要傳入acction委派的參數 第二個AsyncCallb
Thumbnail
在傳統開發的過程中,很容易會搞混一般的 this 和箭頭函式(arrow function)中的 lexcial "this" 兩者的差異。本文就以實際的例子來說明各自的差異,以及在未來使用時需要注意哪一些細節。
Thumbnail
在傳統開發的過程中,很容易會搞混一般的 this 和箭頭函式(arrow function)中的 lexcial "this" 兩者的差異。本文就以實際的例子來說明各自的差異,以及在未來使用時需要注意哪一些細節。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
這是一場修復文化與重建精神的儀式,觀眾不需要完全看懂《遊林驚夢:巧遇Hagay》,但你能感受心與土地團聚的渴望,也不急著在此處釐清或定義什麼,但你的在場感受,就是一條線索,關於如何找著自己的路徑、自己的聲音。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
《轉轉生》(Re:INCARNATION)為奈及利亞編舞家庫德斯.奧尼奎庫與 Q 舞團創作的當代舞蹈作品,結合拉各斯街頭節奏、Afrobeat/Afrobeats、以及約魯巴宇宙觀的非線性時間,建構出關於輪迴的「誕生—死亡—重生」儀式結構。本文將從約魯巴哲學概念出發,解析其去殖民的身體政治。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本文分析導演巴里・柯斯基(Barrie Kosky)如何運用極簡的舞臺配置,將布萊希特(Bertolt Brecht)的「疏離效果」轉化為視覺奇觀與黑色幽默,探討《三便士歌劇》在當代劇場中的新詮釋,並藉由舞臺、燈光、服裝、音樂等多方面,分析該作如何在保留批判核心的同時,觸及觀眾的觀看位置與人性幽微。
Thumbnail
本章節主要介紹了JavaScript中的流程控制,包括條件語句(如if、else if、else和三元運算子)和循環結構(如for迴圈、while迴圈等)。同時,也提供了如何使用break、continue和label來控制迴圈的執行。
Thumbnail
本章節主要介紹了JavaScript中的流程控制,包括條件語句(如if、else if、else和三元運算子)和循環結構(如for迴圈、while迴圈等)。同時,也提供了如何使用break、continue和label來控制迴圈的執行。
Thumbnail
在搞清楚事件委託前必須先了解什麼是事件傳遞機制(Event Propagation),也就是捕獲(capture)跟冒泡(bubble),聽起來好像很難但是我昨天看完彭彭的直播課程(17:00開始)後就懂了!我寫成文章幫助記憶,也希望能幫助到大家,然後希望我面試會被考到。
Thumbnail
在搞清楚事件委託前必須先了解什麼是事件傳遞機制(Event Propagation),也就是捕獲(capture)跟冒泡(bubble),聽起來好像很難但是我昨天看完彭彭的直播課程(17:00開始)後就懂了!我寫成文章幫助記憶,也希望能幫助到大家,然後希望我面試會被考到。
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
Thumbnail
背景:從冷門配角到市場主線,算力與電力被重新定價   小P從2008進入股市,每一個時期的投資亮點都不同,記得2009蘋果手機剛上市,當時蘋果只要在媒體上提到哪一間供應鏈,隔天股價就有驚人的表現,當時光學鏡頭非常熱門,因為手機第一次搭上鏡頭可以拍照,也造就傳統相機廠的殞落,如今手機已經全面普及,題
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News