大綱

• 認識同步與非同步
• 非同步控制流程

認識同步與非同步：同步與非同步的概念
JavaScript 是單執行緒 (single threaded runtime)，程式碼由上到下、一行一行依序執行，當遇到函式呼叫，JS 引擎就會建構新的執行環境並放入堆疊 (stack) 裡，同樣一次只處理一件事情 (one thing at a time)，在堆疊頂端的執行環境會先處理 (LIFO，Last in First Out)，當函式執行好並返回 (return) 之後，執行環境就會被移除，例如底下程式先呼叫 funcA()，funcA() 裡面又呼叫 funcB()，JS 引擎執行完 funcB() 並將結果 return 就會將 funcB() 從 stack 裡移除 (pop off)，繼續執行 funcA()。

function funcB(a, b) {
  return a * b
}

function funcA(x)  {
  let Bvalue = funcB(x, x)
  console.log(Bvalue)
}

如果某一段 JS 程式需要很長的執行時間，瀏覽器就會停滯 (freezing) 呈現『假死』狀態，稱為阻塞 (blocking)，使用者就無法再進行任何操作，只能傻傻地等待處理完成，如果改用非同步呼叫就能減少阻塞狀況，降低使用者等待的時間，提升操作的流暢度。

同步與非同步很容易混肴兩者的意思，請看以下說明：

• 同步 (Synchronous，簡稱 Sync)：程式必須等待對方回應之後才能繼續往下執行，例如 A1 呼叫了 B1，必須等到 B1 回應才會繼續執行 A2。通常會使用同步表示 A 的程序與 B 息息相關。
• 非同步 (Asynchronous，簡稱 Async)：程式不必等待對方回應就繼續往下執行，例如 A1 呼叫了 B1，不需要管 B1 就可以繼續往下執行 A2。由此可知，會使用非同步表示 A 與 B 並沒有直接的關係。

認識同步與非同步：定時器 - setTimeout() 與 setInterval()
當我們希望程式能夠在指定的時間執行，通常會使用到瀏覽器的 Web API - setTimeout() 與 setInterval()，兩者的差別在於 setTimeout() 一個只會執行一次，setInterval() 會重複執行。

setTimeout()：
setTimeout() 在指定的延遲時間到時，會執行一個函式或程式碼，格式如下。
var timeOutID = scope.setTimeout(function[, delay, param1, param2, ...]);

scope 在瀏覽器通常是 window，可以省略不寫，setTimeout() 的返回值是定時器的編號，利用 clearTimeout(timeOutID) 敘述就可以取消這個定時器。
function：延遲時間到時要執行的函式 (回呼函式)
delay：延遲時間，單位：毫秒 (1 秒等於 1000 毫秒)，如果省略 delay 參數，delay 會為 0，表示立刻執行函式
param：附加參數，指定延遲時間到會將這些附加參數傳遞給 function

setInterval()：
setTimeout() 通常用於只執行一次的場合， setInterval() 會重複執行，其格式如下。
var timeOutID = scope.setInterval(function[, delay, param1, param2, ...]);

scope 在瀏覽器通常是 window，可以省略不寫，setInterval() 的返回值是定時器的編號，利用 clearInterval(timeOutID) 敘述就可以取消這個定時器。
function：延遲時間到時要執行的函式
delay：延遲時間，單位：毫秒 (1 秒等於 1000 毫秒)，如果省略 delay 參數，delay 會為 0，表示立刻執行函式
param：附加參數，指定延遲時間到會將這些附加參數傳遞給 function

認識同步與非同步：事件循環 (event loop)
以下待寫....加班很忙...