---
title: 非同步的 JavaScript
slug: Learn/JavaScript/Asynchronous
tags:
  - Beginner
  - CodingScripting
  - Guide
  - JavaScript
  - Landing
  - Promises
  - async
  - asynchronous
  - await
  - callbacks
  - requestAnimationFrame
  - setInterval
  - setTimeout
  - 非同步的
---
<div>{{LearnSidebar}}</div>

<p class="summary"><span class="seoSummary">在本單元我們來討論非同步的 ({{Glossary("asynchronous")}}) {{Glossary("JavaScript")}} ，為何其如此重要，並了解它如何有效率的處理像是從伺服器獲取資源的這類潛在性阻塞 (blocking) 操作</span></p>

<div class="callout">
  <h4 id="Looking_to_become_a_front-end_web_developer">想要成為前端開發人員?</h4>

  <p>我們已為您準備一門實現您目標所需要具備的所有基礎知識課程</p>

  <p><a href="/en-US/docs/Learn/Front-end_web_developer"><strong>立即開始</strong></a></p>

</div>

<h2 id="Prerequisites">事前準備</h2>

<p>非同步的 JavaScript 是一個相當進階的主題，因此建議您在嘗試本單元前能先通過 <a href="/zh-TW/docs/Learn/JavaScript/First_steps">JavaScript 初探</a> 以及 <a href="/zh-TW/docs/Learn/JavaScript/Building_blocks">JavaScript 構成元素</a> 單元。</p>

<p>如果您對非同步程式設計的概念還不太熟悉，強烈建議您應該先從 <a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Concepts">非同步程式設計通用概念</a> 的文章開始學習。如果您已經具備其概念，那麼您或許可以跳至 <a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing">非同步的 JavaScript 介紹</a> 單元開始。</p>

<div class="note">
<p><strong>Note</strong>: 如果您正在使用電腦/平板/任何其它無法讓您建立檔案的裝置上，您可以嘗試在 <a href="https://jsbin.com/">JSBin</a> 或是 <a href="https://glitch.com">Glitch</a> 上測試本單元的範例程式碼。</p>
</div>

<h2 id="Guides">Guides</h2>

<dl>
 <dt><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Concepts">非同步程式設計通用概念</a></dt>
 <dd>
 <p>在本篇文章我們會介紹一些關於非同步程式設計的重要觀念，以及在網頁瀏覽器和 JavaScript 中的行為。在閱讀其他文章之前您應該先具備這些觀念。</p>
 </dd>
 <dt><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing">非同步的 JavaScript 介紹</a></dt>
 <dd>在本篇文章中我們會先簡短的回顧我們在同步的 JavaScript 中所遭遇到的問題，並預先看看稍後將會使用哪些非同步的 JavaScript 技巧來解決此問題。</dd>
 <dt><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Timeouts_and_intervals">協同的非同步 JavaScript: Timeouts 和 intervals</a></dt>
 <dd>在這裡看看我們在傳統上是如何透過設定的時間到期或是透過定時的方式 (如每秒發生的次數) 讓 Javascript 能夠以非同步的方式執行程式碼，談談這些方法有哪些用處以及存在哪些既有的問題。</dd>
 <dt><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Promises">優雅的使用 Promises 來處理非同步操作</a></dt>
 <dd>Promises 是在 Javascript 語言中相對較新的功能，它能夠讓你延遲活動直到先前的活動回報完成或失敗。這方法對設置一連串的操作並讓其正確的循序執行相當有用。本篇文章向您展示 promises 是如何運作，您將會看到如何被使用在 WebAPIs，以及如何寫出屬於自己的 promises。</dd>
 <dt><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Async_await">利用 async 及 await 讓非同步程式設計變得更容易</a></dt>
 <dd>Promises 在設置上可能會有些複雜並難以理解，因此現代瀏覽器已經實作出 <code>async</code> 函式以及 <code>await</code> 運算子。前者能夠讓標準的函式隱含的使用 promises 方式來實現非同步行為，然而後者可以被用在 <code>async</code> 函式內部，讓程式碼繼續執行之前去等待一個 promises 完成。這能讓我們在鏈結一連串的 promises 的情況之下更加簡潔易懂。</dd>
 <dt><a href="/zh-TW/docs/Learn/JavaScript/Asynchronous/Choosing_the_right_approach">選擇正確的方法</a></dt>
 <dd>在結束本單元前，我們將會從先前所討論過的不同程式技巧和功能，幫助您考量在甚麼情況下應該使用哪一個，並適當的提供一些有關常見的陷阱的建議及提醒。</dd>
</dl>

<h2 id="See_also">參閱</h2>

<ul>
 <li><a href="https://eloquentjavascript.net/11_async.html">Asynchronous Programming</a> 來自作者為Marijn Haverbeke的極佳的 <a href="https://eloquentjavascript.net/">Eloquent JavaScript</a> 電子書。</li>
</ul>