iT邦幫忙

2024 iThome 鐵人賽

DAY 15
0
佛心分享-刷題不只是刷題

30 天克服前端面試系列 第 15

Day 15 - JavaScript 中 同步 synchronous 與非同步 asynchronous 的差異是什麼?

  • 分享至 

  • xImage
  •  

同步 synchronous

JavaScript 中同步的概念是指程式碼的執行會依照順序進行,必須等到前一個任務完成後才能執行下一個任務。但是由於 JavaScript 是單一執行緒的程式語言,運行同步程如果其任務執行時間過久很可能會阻塞,在瀏覽器中會出現空白或凍結的情況,這會導致使用者體驗不佳。

console.log("Start");
for (let i = 0; i < 1000000000; i++) {} // 模擬一個耗時的同步任務
console.log("End");

這個例子說明了 for 迴圈是一個耗時的同步任務。在執行該迴圈時,瀏覽器將被阻塞,直到任務完成後才會執行 console.log('End')

非同步 asynchronous

非同步的程式碼不會阻塞主執行緒,當程式碼遇到非同步任務時,會先將任務交到交給瀏覽器或 Node.js 的背景進行處理,並繼續執行後續的程式碼。而不是等待非同步任務完成。當非同步任務完成後,會通過 callbackPromiseasync/await 來通知 JavaScript 主執行緒,然後再執行相應的回應操作。這有助於提高程式碼的效率和效能。

console.log("Start");
setTimeout(() => {
  console.log("Async Task Complete");
}, 1000); // 模擬一個 1 秒後完成的非同步任務
console.log("End");

這個例子會先印出 StartEnd,然後再印出 Async Task Complete。這是因為 setTimeout 是一個非同步任務,當遇到 setTimeout 時,會將任務交給瀏覽器背景進行處理,並繼續執行後續的程式碼。

總結

特性差異 同步 (Synchronous) 非同步 (Asynchronous)
執行順序 按照程式碼的順序,逐行執行 可以在執行其他程式碼的同時處理背景中的非同步任務
阻塞 任務執行時會阻塞後續程式碼 任務執行時不會阻塞後續程式碼
應用場景 資料處理、簡單邏輯運算 呼叫 http request、計時器、事件監聽器、檔案讀取、資料庫查詢等
實現方式 順序執行 非同步函式、Promiseasync/await、事件監聽器、setTimeout

本文同步於此


上一篇
Day 14 - 請說明 Map/Set 和 WeakMap/WeakSet 之間的差別是什麼?
下一篇
Day 16 - JavaScript 的匿名函式有哪些應用場景?
系列文
30 天克服前端面試30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言