【JavaScript筆記】 堆疊 Stack ,同步與非同步及setTimeout 基本觀念

Stack 堆疊

由於JavaScript是單一執行緒的語言，也就是一次只能執行一件事情，可以把它想像成我們在堆疊很多書籍，每一次執行一個任務就放上一本書，網上堆疊，到最後我們要執行時也是從上面開始拿出來（先進先出的概念）

Photo by Annie Spratt on Unsplash

同步 Synchronous 與非同步事件 Asynchronous

雖然JavaScript一次只能執行一件事，但瀏覽器在執行任務是多執行緒。像是JavaScript引擎執行序、GUI執行緒（渲染畫面）、定時觸發器執行（setTimeout、setInterval）、非同步HTTP請求緒及事件觸發執行緒（addEventListener），這邊先來介紹同步事件與非同步事件的差別。

同步執行Synchronous 就像是我在家想要自己做個漢堡來吃，所以從頭到尾都要自己一個人逐一料理所有食材。

非同步執行Asynchronous 就像在餐廳內部，每項食材都由不同員工來負責，最後再一起組合成一個漢堡。

任務序列 Task Queue

JavaScript 的執行緒會逐一執行 Stack 內的任務，當碰上了非同步事件時，為了不讓程式被這些需要等待的任務卡著，就會繼續執行後續的動作。 而當這些非同步事件的 callback function 被呼叫時，就會將 callback function 的任務丟到 Event Queue 當中，並等待目前 Stack 的任務都已經完成後，再繼續逐一執行 Event Queue 的任務。

setTimeout 0 是如何被執行的

console.log('hi')

setTimeout(function () {
  console.log('there')
}, 0)

console.log('JSConfEU')

依照剛剛學的觀念來看，

首先 console.log('hi')會先被執行

接下來是 setTimeout(function被執行的時候，會先將callback放到WebApi 計時，直到計時完畢會在放入序列(Queue)當中排隊。直到Stack的任務都完成後再輸出。