iT邦幫忙

2023 iThome 鐵人賽

DAY 14
0
Modern Web

我轉生成前端貓咪踏入React地獄的那些事系列 第 14

Day14 同步&非同步(Synchronous & Asynchronous)

  • 分享至 

  • xImage
  •  

什麼是同步與非同步?

就中文來看這兩種的意思其實相當容易被搞混的,我自己常常在閱讀文章時也很常莫名的被這兩個名詞搞昏頭。所以我會直接用例子來幫助記憶接說明如下:

  1. 同步(Synchronous):就是A處理完再處理再處理C

    A -> B -> C->

  2. 非同步(Asynchronous):就是可以同時處理ABC

    -->A
    |
    -->B
    |
    -->C

JavaScript是屬於同步與非同步?

那話又說回來JavaScript是屬哪一種呢?

引用MDN的定義

Javascript 基本上是一個同步性的、阻塞的,且是跑在單一執行緒的程式語言,也就是在同一時間只能執行一個操作。但是瀏覽器所定義的函式和 API 允許我們註冊一個不該被同步執行的函式,且這個函式應該在某些事件發生時需要非同步的被呼叫(到達指定的時間、使用者透過滑鼠互動,或者取得透過從網路所取到的資料)。這代表你可以讓你的程式碼在同時間做一些事情而不需暫停或阻塞你的主執行緒。

簡單來說,MDN很明確的定義javascript是一個同步性的語言,但可以處理或是說可以執行非同步的方法。下面的例子可以說明:

console.log("registering click handler");

button.addEventListener("click", () => {
  console.log("get click");
});

console.log("all done");

PS:上述是簡化後的例子,真的需要執行的話如下網址:
https://codepen.io/Hsienlu/pen/PoXevrJ

可以發現實際在執行的時候,"all done"並不會等到"get click"被觸發時才會出現,而是會直接執行,所以才會說雖然JavaScript是同步性的語言,但可以處理需要非同步處理的事情。

但是,非同步的事情常常會具有不確定性存在(不知道哪個會先發生哪個會後發生),於是就有了一些處理同步和非同步的方法,這些方法明天會繼續介紹。

參考資料

1.非同步的 JavaScript 介紹


上一篇
Day13 JavaScript 模組(Modules)
下一篇
Day 15 處理同步(Synchronous)和非同步(Asynchronous)的方法Part.1
系列文
我轉生成前端貓咪踏入React地獄的那些事25
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言