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

Поделиться
HTML-код
  • Опубликовано: 16 ноя 2024

Комментарии • 62

  • @james-kool
    @james-kool  7 месяцев назад +17

    【補充資訊】
    要理解本章節,需要先有以下知識比較容易理解影片內容。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 7 месяцев назад +2

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

    • @james-kool
      @james-kool  7 месяцев назад

      @@Yu_blackhole 感謝支持!

    • @dragonfly1487
      @dragonfly1487 7 месяцев назад

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

    • @james-kool
      @james-kool  7 месяцев назад

      @@dragonfly1487對, 無時限哦~

    • @gen2ssi396
      @gen2ssi396 7 месяцев назад

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

  • @Justask.studio
    @Justask.studio 7 месяцев назад +69

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

    • @nayance
      @nayance 7 месяцев назад +1

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

    • @jcyh
      @jcyh 7 месяцев назад +3

      被程式耽誤的動畫師(誤

  • @user-dw2fs3sj6j
    @user-dw2fs3sj6j 7 месяцев назад +4

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

  • @xuyuhao8602
    @xuyuhao8602 3 месяца назад

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

  • @rayfungpi
    @rayfungpi 7 месяцев назад +3

    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
    @ac.23z 7 месяцев назад +2

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

  • @user-mineke
    @user-mineke 7 месяцев назад +3

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

  • @user-abiko_cccc
    @user-abiko_cccc 6 месяцев назад

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

  • @waynechiu9078
    @waynechiu9078 7 месяцев назад +1

    竟然出技術內容了,推

  • @K59820433
    @K59820433 7 месяцев назад +1

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

  • @Rayeee-o2p
    @Rayeee-o2p 7 месяцев назад +1

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

  • @一坪の海岸線-u5d
    @一坪の海岸線-u5d 7 месяцев назад +2

    好精緻的影片 辛苦了~

  • @wayneyeh6286
    @wayneyeh6286 7 месяцев назад +1

    這個配音, 剪輯 好讚

  • @lianchen486
    @lianchen486 7 месяцев назад +1

    又幫複習了一次感謝哥

  • @594wei
    @594wei 7 месяцев назад +1

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

  • @cckdee5263
    @cckdee5263 7 месяцев назад +2

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

  • @ctchen1988
    @ctchen1988 7 месяцев назад +2

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

  • @suikasnow
    @suikasnow 7 месяцев назад +1

    超級清楚!!! 感謝

  • @bondjames7704
    @bondjames7704 7 месяцев назад +1

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

  • @oo7521
    @oo7521 7 месяцев назад

    很棒,受教

  • @MaxWang0520
    @MaxWang0520 7 месяцев назад +1

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

  • @憂衛基
    @憂衛基 7 месяцев назад +2

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

    • @james-kool
      @james-kool  7 месяцев назад +3

      使用manim搭配Davinci resolve 做的

  • @timhuang4431
    @timhuang4431 7 месяцев назад +1

    nice 很讚

  • @moregirl4585
    @moregirl4585 14 дней назад

    恰好是在stack拿完的时候从queue拿,所以可以当一个deque看吗?

  • @a602050308
    @a602050308 7 месяцев назад

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

  • @Peter-r4h9q
    @Peter-r4h9q 7 месяцев назад

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

    • @Yuyu-.-
      @Yuyu-.- 7 месяцев назад

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

    • @silentashhoward
      @silentashhoward 7 месяцев назад +1

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

  • @benny123tw
    @benny123tw 7 месяцев назад

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

  • @陳柏均-d4q
    @陳柏均-d4q 7 месяцев назад

    期待未來出linux課程

  • @coconuttreez
    @coconuttreez 6 месяцев назад

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

  • @duei7789
    @duei7789 7 месяцев назад +1

    World怎麼聽起來像是well

  • @楊天久
    @楊天久 7 месяцев назад

    支持一下

  • @kn2484
    @kn2484 7 месяцев назад

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

  • @EtailaxiA
    @EtailaxiA 7 месяцев назад

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

  • @borislai9970
    @borislai9970 7 месяцев назад

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

  • @夜行者-p3x
    @夜行者-p3x 7 месяцев назад +4

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

    • @老馬夜
      @老馬夜 7 месяцев назад

      很工程師的字幕😂

  • @LeeeroyDex
    @LeeeroyDex 7 месяцев назад +1

    BGM太大。 1:20

  • @HannLin
    @HannLin 7 месяцев назад

    Hello~
    World~

  • @阿才-f1x
    @阿才-f1x 6 месяцев назад

    BGM有點大聲

  • @frankcklin
    @frankcklin 7 месяцев назад +1

    queue與stack 是什麼😥

    • @james-kool
      @james-kool  7 месяцев назад +7

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

    • @Yin-Hsun_Hung
      @Yin-Hsun_Hung 7 месяцев назад

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

    • @Yin-Hsun_Hung
      @Yin-Hsun_Hung 7 месяцев назад

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

    • @james-kool
      @james-kool  7 месяцев назад +1

      @@Yin-Hsun_Hung callback queue是event loop的一個部分

    • @無名氏-l1c
      @無名氏-l1c 7 месяцев назад

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

  • @playingzyo
    @playingzyo 7 месяцев назад +1

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

    • @james-kool
      @james-kool  7 месяцев назад

      讓子彈飛一會