iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 7
1
Modern Web

一個 JS 學習者的日常系列 第 7

一個 JS 學習者的日常 day6

「當你程式的某部份現在(now)立即執行,而另外一部分要在之後 (later) 執行時,會發生什麼事,在這個 now 和 later 之間,有個間隙 (gap) 存在,期間你的程式並沒有積極執行。」
- 你所不知道的JS

來看一下下面這段程式。這段程式會在五秒鐘後,做"Hello Async"的提示。

setTimeout(
  function(){ alert("Hello Async"); 
  }, 5000);

思考:
像這樣子處理現在到之後發生的事,我們稱為非同步。
什麼是非同步?非同步包括,網路連線要求之類的I/O(例如AJAX)、DOM事件處理、動畫流程處理(計時器)外。

我們將程式碼改寫一下,分為同步跟非同步的部分。

我們可以看到執行結果為A->B->C

然後將過程視覺化,看一下他是怎麼進行的,我們可以用Philip Roberts的模擬器,去理解非同步的事件迴圈是怎麼循序處理問題。

Call Stack 模擬器

  1. 顯示A //同步
  2. 讀取C //非同步處理
  3. 將C段丟到Web Apis
  4. 期間Web Apis資料準備(下圖)
  5. 顯示B //同步
  6. Web Apis資料準備完成(過5秒),丟到Call Queue
  7. Call Stack空了
  8. 到Callback Queue拿Web Apis準備好的資料
  9. 拿取資料,顯示B

再回到最原本的程式碼,我們可以看到,我們用一個setTimeout的函式,去呼叫一個 callback 函式。而 callback 便是非同步最基本的單位。但我們要處理的狀態越來越多,結構越來越複雜的時候,callback 也許就不夠用了,事件的交錯與不確定資料處理的期間,不斷增加開發中理解與撰寫上的困難。再進一步學習中,處理相關的問題 Promise 是其中一個選項。

setTimeout(
  function(){ alert("Hello Promise"); 
  }, 10000);

上一篇
一個 JS 學習者的日常 day5
下一篇
一個 JS 學習者的日常 day7
系列文
一個 JS 學習者的日常30

尚未有邦友留言

立即登入留言