Andy的前後端技術筆記、生活紀錄
JS中的Async/Sync
發佈於: 2023-01-01 更新於: 2024-04-21 分類於: frontend

同步與非同步?

什麼是同步

一般來說JS都是以 同步synchronous 的方式執行程式碼,以圖中左邊來說,由上而下的時間軸順序執行程式碼,每次只做一件事,
同步的字面上來說很像是同時做很多件事,但其實是一次只執行一件事。

什麼是非同步

什麼又是 非同步 ,上面提到的一次只能一次做一件,以下圖來看的意思就是,某些時候會有些運算或是網路請求耗時會較長,但我們又不希望整個程式碼因為要等待某個function執行完畢才往下繼續執行,這時候就需要非同步。
想像一下,你在正瀏覽某個網頁,因為點擊某個按鈕,而這按鈕因為需要做些費時較長的功能,而因為這樣頁面就卡住無法瀏覽,這樣使用者體驗應該會很差吧?

  • 舉例:JS中有個function setTimeout() 是可以在這裡面寫一個callback function,在設定的倒數時間到之後執行它,那如果現在他是以同步的方式執行,這樣程式碼會卡在那邊等到時間到才能往下繼續執行,那如果是非同步,程式碼會繼續往下執行之外同時在背景還會繼續倒數直到時間到執行設定好的callback function。

async

--- 到底拉 The End ---