新手指南：什麼是同步與非同步？

By徐培鈞
LinkedIn

更新日期： 2025 年 3 月 9 日

本文為 AJAX 基本介紹系列文，第 3 篇：

  1. 初學者指南：什麼是HTTP 方法？
  2. 網頁狀態碼（HTTP Status Code）指南：從分類到常見應用
  3. 新手指南：什麼是同步與非同步？　👈進度
  4. 新手指南：什麼是 AJAX？
  5. 新手指南：什麼是 XMLHttpRequest？
  6. 初學者指南：了解 JavaScript 的 fetch 函數
  7. 深入理解Fetch 函數的第二個參數
  8. 初學者指南：了解JavaScript 的Promise 物件
  9. JavaScript 中的await 關鍵字：從fetch 到現代非同步處理
  10. 初學者指南：了解JavaScript 中的Promise 和await
  11. fetch 方法到底取得的東西是什麼？
  12. 新手指南：什麼是 JSON？

當你在學習網頁開發或者編程時，可能經常會遇到「同步」和「非同步」這兩個詞。

這些概念對於理解 JavaScript 和網頁應用的工作原理至關重要。

本篇文章將幫助你了解什麼是同步與非同步，並且讓你理解它們在日常開發中的應用和差異。

同步是什麼？

同步（Synchronous）可以理解為按順序執行。

在同步操作中，所有的任務都會按順序一個接一個地完成，後面的任務必須等待前面的任務完成才能繼續。

舉個簡單的例子：

假設你有三個任務 A、B、C，這些任務是同步的，那麼它們會依次執行，只有當任務 A 完成後，任務 B 才會開始，接著才是任務 C。

在 JavaScript 中，如果一段代碼是同步執行的，整個執行過程中，程序會等到每一行代碼執行完畢之後才會繼續執行下一行代碼。

因此，當遇到耗時的操作時，例如等待伺服器回應，整個程序會暫停，直到操作完成為止。

同步的範例

console.log("開始");
alert("這是一個同步操作，點擊確認後繼續");
console.log("結束");

在上面的代碼中，alert() 會顯示一個彈出框，並且在用戶點擊「確認」之前，後續的 console.log("結束") 不會被執行。

這就是同步的特點：所有事情按照順序一個接一個地發生。

非同步是什麼？

非同步（Asynchronous）則是不按順序執行，也就是說，一個任務的完成，不需要等待其他任務的結束。

在非同步操作中，當一個任務在等待某些資源（例如伺服器回應）時，其他任務可以繼續執行，而不必等待。

這樣的操作方式非常有助於提高程序的效率，特別是在網頁開發中，這意味著用戶可以繼續與網頁進行交互，而不必因為某些操作而讓整個頁面被鎖住。

非同步的範例

以下是一個使用 setTimeout() 的例子，它會在指定時間後執行回調函數：

console.log("開始");
setTimeout(() => {
  console.log("非同步操作完成");
}, 2000);
console.log("結束");

在這段代碼中，setTimeout() 是一個非同步函數，它設置了一個 2 秒的延遲。在這個延遲期間，JavaScript 不會停下來等待，而是直接繼續執行 console.log("結束")。因此，輸出順序會是：

開始
結束
非同步操作完成

可以看到，「非同步操作完成」是在最後才被打印出來的，因為它是非同步的，不會阻塞後續代碼的執行。

延伸閱讀：初學者指南：深入了解 JavaScript 中的 setTimeout

同步與非同步在網頁中的應用

同步操作的問題

在網頁開發中，同步操作有時候會造成不良的用戶體驗。

例如，如果你用 JavaScript 發送一個同步請求來獲取伺服器數據，在伺服器回應之前，整個網頁將被「鎖住」。

用戶無法進行任何操作，這樣的情況對用戶來說是非常不友好的。

非同步的優勢

為了解決這個問題，我們使用非同步操作。

非同步操作允許網頁，在等待伺服器回應時仍然能夠繼續運行其他代碼，從而提升用戶體驗。

這就是 AJAX 的主要功能之一，它能讓頁面部分內容在不刷新整個頁面的情況下更新。

例如，當你在網頁上提交表單後，伺服器可能需要一些時間來處理這個請求。

通過 AJAX 的非同步請求，用戶可以在等待伺服器回應的同時，繼續瀏覽其他內容，而不用等到頁面刷新完成。

JavaScript 中的非同步工具

JavaScript 提供了多種方法來處理非同步操作，以下是幾個常見的工具：

  1. setTimeout() 和 setInterval()：這些方法允許在指定時間後執行某段代碼，是最基本的非同步操作。
  2. XMLHttpRequest 和 Fetch API：這些方法用於向伺服器發送請求並獲取回應，特別適合在網頁中進行非同步數據交換。
  3. Promise：Promise 是一個 JavaScript 物件，用於表示一個尚未完成但未來會完成的操作（例如伺服器請求）。它可以幫助我們更好地管理非同步代碼，使代碼更加可讀和易於維護。
  4. async/await：這是 JavaScript 中用來處理非同步操作的語法糖，能夠讓代碼看起來像同步一樣易於閱讀，但實際上是非同步執行的。

使用 async/await 的例子

async function fetchData() {
  console.log("開始");
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log("獲取數據：", data);
  console.log("結束");
}

fetchData();

在這段代碼中，await 使得程式看起來像是同步執行，但實際上它不會阻塞整個程序，因為它只會等待 fetch 的結果，而不會影響其他代碼的執行。

小結

同步和非同步是理解 JavaScript 編程的基礎概念。

同步操作會按順序執行，可能導致程式暫停，直到某個操作完成。

而非同步操作則允許程式，在等待的同時繼續執行其他代碼，從而提供更好的用戶體驗。

在現代網頁開發中，非同步操作非常重要，它讓網頁更加動態和響應迅速。

通過學習和理解這些概念，你將能夠更好地處理網頁中的異步操作，提升你的開發技能。

希望這篇文章能幫助你理解同步與非同步的差異，並在你的開發過程中靈活運用它們！

延伸閱讀：

Similar Posts