前端三十｜11. [JS] 如何處理非同步事件？

在網站開發中，非同步的議題是所有站台必然需要處理的一環，也因為前端框架的興起，透過框架實現的 SPA 已經是現代快速建構網站的標配了，非同步取得資料也就成了不可或缺的一環；今天就讓我們一起來看看 JavaScript 中非同步的處理方式吧。

不過在開始之前，先讓我小小懺悔一下；我在 幾天前的文章 中用了一張梗圖，上面寫著：「2019 年了，不要再用 Table 排版了」，結果今天下班前就接到要切 HTML Email 通知信版型的需求。這難道就是現世報嗎？好吧 Table 很棒…我很抱歉 QQ

小知識：如同 JavaScript 的「一個規範、各自表述」一般，HTML Email 的執行環境可以簡單理解成各家廠商不完全依照 HTML、CSS 規範，各別實作的渲染引擎；常用的 CSS 屬性如 position、display: absolute 等屬性都不支援，幾乎只能依賴 Table 做出較複雜的排版。

本系列文已經重新編校彙整編輯成冊，並正式出版囉！

《前端三十：從 HTML 到瀏覽器渲染的前端開發者必備心法》好評販售中！

喜歡我文章內容的讀者們，歡迎您前往購買支持！

同步？非同步？

那麼就進入正題吧。

首先當然要先理解一下同步及非同步分別是指什麼。

這兩個名詞對新手而言總是讓人感到困惑，畢竟從中文字面上的意思很容易讓人不小心就反過來理解，不過從電腦科學的角度來說，同步 指的是一件一件事情來，而 非同步 則是很多事情一起並行的在處理。

大家還記得 前天的提到的買東西案例 嗎？情境 1 需要在店家前久候的就是同步執行，而得到取餐令牌可以去做別的事情的就是非同步執行；透過 Event Loop 的特性，在 JavaScript 處裡非同步事件可說是輕而易舉、稀鬆平常～

那麼在 JavaScript 中處理非同步事件的方法是什麼呢？

回呼函式

最熟悉最常出現的就是回呼函式了。例如網頁與使用者進行互動註冊的事件監聽器，就需要接收一個回呼函式；或是其他 Web API 的各種功能如 setTimeout、xhr，也都能透過傳遞回呼函式，並在使用者要求的時機觸發它。例如看一個 setTimeout 的例子：

// callback
function withCallback() {
  console.log('start')
  setTimeout(() => {
    console.log('callback func')
  }, 1000)
  console.log('done')
}