JavaScript觀念筆記: Event Loop (事件迴圈)
本筆記用來記錄一些JS上的觀念,目前為初學者的小筆記,若是有任何不足地方還請多多包涵!
透過JavaScript event loop機制,來了解到同步與非同步的執行程序!
不過再談論同步/非同步執行方式前,必須先複習資料結構!
我們經常使用陣列來處理資料,最常見有兩種方式:
1. Stack(堆疊)
先進後出的資料結構(First in last out; FILO),
單邊出入口所以先放進去的資料最後取出
2. Queue(佇列)
先進先出的資料結構(First in first out; FIFO),
雙邊出入口所以先進去的資料可以先取出
瞭解這兩種資料結構特性後,我們來介紹一下JavaScript!
在學習JavaScript過程上,或多或少我們會發現它是(Single threaed)單線程執行任務,它一次只能做一件事情也就是同步概念!
雖然JS是單執行緒,但它執行的主要環境是瀏覽器或是node.js上面,而兩者執行卻不是單執行緒,而這時候會利用Event loop機制來幫助JavaScript達到非同步處理
有一點要強調的是，JavaScipt所謂的非同步並不是真的同時執行多個任務
那什麼是event loop (事件迴圈)?
Event loop 運作模式就是不斷去監看call stack & call queue
Call stack (監測stack)
當有a function call b function， 此時call stack 就會把 a 先丟近來、再把 b 丟在 a 上方。
所以會盡量避免創造無窮迴圈,若是不停地堆疊上去,空間會超出負荷,導致Stack Overflow發生!
Call Queue (監測Queue)
則是當有非同步function時,最常見的就是setTimeOut(),瀏覽器會先將他往後擺放到Queue中等待stack裡清空後才會執行!
順序如下:
1. 監看 Call Stack
2. 監看 Callback Queue
3. 如果 Call Stack 為空，且 Callback Queue 有東西
4. 將 Callback Queue 的東西移到 Call Stack
5. (回到一,以此類推)
回顧整個流程,會發現stack的地方是真正執行JavaScript的地方, Queue則是等待被處理的地方,而瀏覽器就是一直重複監看這兩個地方,這就是event loop(事件迴圈)
從運作的過程中我們便可以發現到，setTimeout 只能保證超過幾毫秒後 「將會」 執行，但並不能保證在幾毫秒後會 「即刻」 執行。
就像是將時間設定為零,並不會立刻執行程式,而是接下來某個時間點會執行!
最後篇範例是用setTimeout( )來處理非同步，不表示非同步只有setTimeout( )可以使用，還有非常多的非同步處理!
(資料來源來自於影片: Philip Roberts | JSConfEU
