JavaScript Event Loop解說:單執行緒還能異步運算?

Sdílet
Vložit
  • čas přidán 6. 07. 2024
  • 0:00 Intro
    1:16 範例1:stack運作
    2:13 範例2:setTimeout
    4:42 範例3:fetch
    影片中使用的Icons: www.flaticon.com
    插圖來源:www.irasutoya.com/
    B roll來源:envato elements

Komentáře • 60

  • @james-kool
    @james-kool  Před 3 měsíci +16

    【補充資訊】
    要理解本章節,需要先有以下知識比較容易理解影片內容。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
      @Yu_blackhole Před 3 měsíci +2

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

    • @james-kool
      @james-kool  Před 3 měsíci

      @@Yu_blackhole 感謝支持!

    • @dragonfly1487
      @dragonfly1487 Před 3 měsíci

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

    • @james-kool
      @james-kool  Před 3 měsíci

      @@dragonfly1487對, 無時限哦~

    • @gen2ssi396
      @gen2ssi396 Před 3 měsíci

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

  • @Justask.studio
    @Justask.studio Před 3 měsíci +67

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

    • @nayance
      @nayance Před 2 měsíci

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

    • @jcyh
      @jcyh Před 2 měsíci +2

      被程式耽誤的動畫師(誤

  • @rayfungpi
    @rayfungpi Před 3 měsíci +4

    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, 把結果傳進去執行一直下去

  • @user-dw2fs3sj6j
    @user-dw2fs3sj6j Před 3 měsíci +4

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

  • @user-mineke
    @user-mineke Před 3 měsíci +3

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

  • @user-rj6nc7dn2e
    @user-rj6nc7dn2e Před 3 měsíci +2

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

  • @user-bn5hw4ex2j
    @user-bn5hw4ex2j Před 3 měsíci +3

    好精緻的影片 辛苦了~

  • @ac.23z
    @ac.23z Před 3 měsíci +3

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

  • @waynechiu9078
    @waynechiu9078 Před 3 měsíci +2

    竟然出技術內容了,推

  • @snowsuikaOuO
    @snowsuikaOuO Před 3 měsíci +2

    超級清楚!!! 感謝

  • @lianchen486
    @lianchen486 Před 3 měsíci +2

    又幫複習了一次感謝哥

  • @wayneyeh6286
    @wayneyeh6286 Před 3 měsíci +2

    這個配音, 剪輯 好讚

  • @K59820433
    @K59820433 Před 3 měsíci +2

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

  • @594wei
    @594wei Před 3 měsíci +2

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

  • @timhuang4431
    @timhuang4431 Před 3 měsíci +2

    nice 很讚

  • @MaxWang0520
    @MaxWang0520 Před 3 měsíci +2

    製作這個影片一定很麻煩,給你一個讚!!

  • @ctchen1988
    @ctchen1988 Před 3 měsíci +3

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

  • @oo7521
    @oo7521 Před 2 měsíci

    很棒,受教

  • @user-abiko_cccc
    @user-abiko_cccc Před měsícem

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

  • @user-oo2hq6pl9t
    @user-oo2hq6pl9t Před 3 měsíci +1

    支持一下

  • @cckdee5263
    @cckdee5263 Před 2 měsíci +1

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

  • @bondjames7704
    @bondjames7704 Před 2 měsíci +1

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

  • @user-zt2mq8jd4y
    @user-zt2mq8jd4y Před 3 měsíci +1

    期待未來出linux課程

  • @a602050308
    @a602050308 Před 2 měsíci

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

  • @user-gn8lz7yl2x
    @user-gn8lz7yl2x Před 3 měsíci +1

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

    • @Yuyu-.-
      @Yuyu-.- Před 3 měsíci

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

    • @silentashhoward
      @silentashhoward Před 2 měsíci +1

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

  • @duei7789
    @duei7789 Před 3 měsíci +2

    World怎麼聽起來像是well

  • @user-ik4ck6tn6k
    @user-ik4ck6tn6k Před 3 měsíci +3

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

    • @james-kool
      @james-kool  Před 3 měsíci +3

      使用manim搭配Davinci resolve 做的

  • @coconuttreez
    @coconuttreez Před měsícem

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

  • @EtailaxiA
    @EtailaxiA Před 2 měsíci

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

  • @benny123tw
    @benny123tw Před 2 měsíci

    想問個問題,要怎麼知道自己已經會某些概念了?比如這次談到的單執行緒,我能夠很快的回答出正確答案,感覺我會了,但又同時覺得我還不會😢 很矛盾

  • @user-fo1gw3qs6p
    @user-fo1gw3qs6p Před 3 měsíci +5

    影片很精緻,字幕有點...

    • @老馬夜
      @老馬夜 Před 2 měsíci

      很工程師的字幕😂

  • @kn2484
    @kn2484 Před 2 měsíci

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

  • @borislai9970
    @borislai9970 Před 2 měsíci

    這集突然覺得剪輯比程式還有趣

  • @HannLin
    @HannLin Před 2 měsíci

    Hello~
    World~

  • @LeeeroyDex
    @LeeeroyDex Před 2 měsíci +1

    BGM太大。 1:20

  • @user-wm3hw6jy5l
    @user-wm3hw6jy5l Před 2 měsíci

    BGM有點大聲

  • @frankcklin
    @frankcklin Před 3 měsíci +2

    queue與stack 是什麼😥

    • @james-kool
      @james-kool  Před 3 měsíci +7

      queue跟stack都是資料結構喔。他們都支援push跟pop兩種運算。push會把一個item加到裡面,pop會把元素拿出來。
      queue的特性是先進先出,意思是第一個push進去的東西也會第一個出來。
      stack為先進後出,第一個push進去的東西會最後出來。

    • @user-ip9gn7ee6d
      @user-ip9gn7ee6d Před 3 měsíci

      我也好奇,之前只有學過function call時,會把變數跟program counter push到stack。但queue是什麼?

    • @user-ip9gn7ee6d
      @user-ip9gn7ee6d Před 3 měsíci

      @@james-kool 我所知道的只有text, data, bss, heap, stack而已 (參考wiki en.wikipedia.org/wiki/Code_segment )
      那queue是在哪個部份?

    • @james-kool
      @james-kool  Před 3 měsíci +1

      @@user-ip9gn7ee6d callback queue是event loop的一個部分

    • @user-bl1rg6me7g
      @user-bl1rg6me7g Před 3 měsíci

      @@user-ip9gn7ee6dstack跟queue都只是一種抽象的資料結構。實作上差別只是增加資料跟取出資料的起始位置是在頭還是尾而已。本質上都是一串連續的資料。

  • @playingzyo
    @playingzyo Před 3 měsíci +1

    為什麼你的中英文發音都可以讓字幕君想自殺?

  • @fuczlin9450
    @fuczlin9450 Před 3 měsíci +3

    非常高值的影片與教學,感謝並支持繼續創作!🎉