JavaScript Event Loop解說：單執行緒還能異步運算？

Рет қаралды 27,260

Күн бұрын

Пікірлер: 62

@james-kool 8 ай бұрын

【補充資訊】要理解本章節，需要先有以下知識比較容易理解影片內容。stack與queue都是資料結構中會學到的概念，而call stack通常會在學習比較低階的程式語言，或是大一大二計算機基礎的課程中會提到。如果沒有相關背景知識，可以參考以下連結。【stack】 stack為一種資料結構，需要支援push與pop兩種操作。stack特性為先進後出。詳細可參考以下連結： ithelp.ithome.com.tw/articles/10265265 【queue】 queue為一種資料結構，需要支援enqueue與dequeue兩種操作。queue特性為先進先出。詳細可參考以下連結： ithelp.ithome.com.tw/articles/10266980 【call stack】在程式執行的時候，會在記憶體中有一個區塊，用來記錄函數的呼叫與返回。這個區塊稱為call stack。詳細可參考以下連結： www.lagagain.com/post/這些那些你可能不知道我不知道的web技術細節12/ 程式語言課程：jameskool.com/p/javascript-course-v2 副頻道：www.youtube.com/@james-clips ig：instagram.com/jameskool.official/ Patreon會員專屬影片：www.patreon.com/user?u=99360097

@Yu_blackhole 8 ай бұрын

雖然非新手但還是想支持一下跟加強js底子當然主因是這詳細的動畫圖解看得出來下很多功夫！

@james-kool 8 ай бұрын

@@Yu_blackhole 感謝支持！

@dragonfly1487 8 ай бұрын

想問個課程問題: 課程是無時限的嗎? 由於目前要考研沒空看的原因，考慮買來考完研後再看

@james-kool 8 ай бұрын

@@dragonfly1487對，無時限哦～

@gen2ssi396 8 ай бұрын

挺好的，就是有很多细节还不明白，例如setTimeout 的时间到了，而stack还堆着没有执行的指令，那是接着执行Stack里剩下的指令还是把Queue里的指令拿出来立刻执行呢

@Justask.studio 8 ай бұрын

這個剪輯強到我都沒辦法專心看內容了😂😂😂

@nayance 7 ай бұрын

真的，動畫愈作愈厲害...

@jcyh 7 ай бұрын

被程式耽誤的動畫師(誤

@user-dw2fs3sj6j 8 ай бұрын

我真是太震撼了，從很久以前開始看 james 的影片，這一支製作之精良簡直無可挑剔

@xuyuhao8602 4 ай бұрын

第一次這麼清晰地理解js 的 stack跟queue

@rayfungpi 8 ай бұрын

Promise 是基於 Marco Task & Micro Task 演變出來, 而最重要是 State 的觸法條件。每一次將 Task 放入特處理的 Marco Task 內, 每一組 Marco Task 執行, 那組每一個 Task 就是 Micro Task。就是 Stack & Queue 基礎概念。上一組 Micro Task 還沒跑完, Queue 進去的新 Task 會 Stack 到下一輪 Marco Task 等待下一個 Cycle 執行。當時還沒有 Promise, 則把 callback / variable 用另一個 callback 包著再執行, 然後傳入兩個 callback 分別為 resolve 跟 reject 去接收 callback 執行結果。而 then 則是把 callback 塞到 Marco Task 等待 resolve 後, 把 Marco Task 抽出一組迴圈成每一個 Mirco Task 包裝成 Promise, 把結果傳進去執行一直下去

@ac.23z 8 ай бұрын

這次的影片動畫特效太強了吧！！！

@user-mineke 8 ай бұрын

好厲害的影片，清晰易懂，感謝🙏

@K59820433 8 ай бұрын

超用心。希望能看到更深度的內容

@waynechiu9078 8 ай бұрын

竟然出技術內容了，推

@Rayeee-o2p 8 ай бұрын

推推，還用影片呈現也太用心

@一坪の海岸線-u5d 8 ай бұрын

好精緻的影片　辛苦了～

@wayneyeh6286 8 ай бұрын

這個配音, 剪輯好讚

@lianchen486 8 ай бұрын

又幫複習了一次感謝哥

@ctchen1988 8 ай бұрын

Great work! 在中文教程中算頂的

@594wei 8 ай бұрын

最近為了要實現作業的一些功能剛好卡在這個點上這真是一場及時雨呀 🤣

@suikasnow 8 ай бұрын

超級清楚!!! 感謝

@cckdee5263 7 ай бұрын

其實就是JS雖然是單執行緒但瀏覽器是多執行緒異步任務會由瀏覽器的多執行執行完

@MaxWang0520 8 ай бұрын

製作這個影片一定很麻煩，給你一個讚！！

@bondjames7704 7 ай бұрын

謝謝分享！影片很精緻，但是好像有幾支影片的音樂都蓋過人聲，讓人需要很專心才可以聽得清楚在說什麼，觀賞上有些困擾。

@user-abiko_cccc 6 ай бұрын

这就是js 里面最重要的一个机制：回调函数的原理。通过使用回调函数机制，js 即便是单线程也可以执行异步动作。通过这个机制，也可以产生所谓的伪多线程的程序效果。

@timhuang4431 8 ай бұрын

nice 很讚

@oo7521 7 ай бұрын

很棒，受教

@a602050308 7 ай бұрын

希望可以再做一集講宏任務和微任務 ~

@憂衛基 8 ай бұрын

教學動畫真精緻👍可以分享一下是用什麼軟體製作的嗎

@james-kool 8 ай бұрын

使用manim搭配Davinci resolve 做的

@陳柏均-d4q 8 ай бұрын

期待未來出linux課程

@RONI-EtailaxiA 7 ай бұрын

當真是要多執行緒的時候就用worker，可以把cpu跑滿100% (x

@LeeeroyDex 7 ай бұрын

BGM太大。 1:20

@coconuttreez 6 ай бұрын

請問第三個範例中，如果用 await fetch() 的話，stack 中的 fetch 會馬上被 pop 出來嗎？

@kn2484 7 ай бұрын

多執行緒也不代表同時, 除非是多核

@duei7789 8 ай бұрын

World怎麼聽起來像是well

@Peter-r4h9q 8 ай бұрын

就想成一個工人，要把現在這張單子做好，那單子上要等的東西，就放在旁邊單子弄好後，放在旁邊的工作在重新開始做跟 C# 比 JS算簡單，C# 一下async await 曾經看過， async 有5層(被汙染了)，然後真的Await現在是哪個都不知道，弄到後面想哭最後直接不管，強制一段做完在呼叫下一段，反正寫遊戲Loading，不怕浪費時間其實真覺得，程式語言要有個退役時間，時間到就該讓他退退不然累積的技術債問題真的很大......

@Yuyu-.- 8 ай бұрын

非同步本來就有傳播性，await 哪個不知道是寫的人的問題而不是語言問題。

@silentashhoward 7 ай бұрын

退役這件事情代表成本管理的部分你沒想到，如果能退役就退役那前提是你要先有成本去重寫相關程式碼，技術債是一定會堆疊，公司營運沒有像寫程式一樣又簡單、又單純的