# JavaScript - JavaScript 是單執行緒(單線程)，alert 優先執行
###### tags: `javascript` `AJAX` `axios`
---
Q：
關於 [AJAX POST 小節作業練習](https://codepen.io/Zoechiueh/pen/wvqVaWX)，第 23~31 行，if 判斷 "帳號註冊成功" 或 "此帳號已被使用"，為什麼 innerHTML 渲染文字寫在 alert 功能前面，實際執行時仍然是 alert 會先跳出，需按掉 alert 才會執行 innerHTML 渲染出文字，想知道為什麼 registerMessage.innerHTML 與 alert 執行先後順序不論誰寫前面都是先跳出 alert ？

A：
原因是因為在 JavaScript 中 alert 會優先執行喔。會優先執行的原因比較複雜一點，可以試著理解看看：

JavaScript 是單執行緒(單線程)，無論何時都只會有一個執行序。簡單來說就是**一次只能做一件事情**。

但如果一直依照順序等待，會花費非常久的時間，所以 JavaScript 會將一些非同步操作全都放到一個事件佇列，**先執行同步程式碼**，等到 JavaScript 引擎沒有要執行的同步程式碼，CPU 空閒下來再讀取事件佇列的非同步事件。

> *事件佇列可以想成是「事件在排隊」的隊伍*

* 需要排隊等待的非同步操作：**DOM 操作、**使用者操作事件（Click）、setTimeout...
* 不需要排隊等待的同步操作：**alert()**

> *alert 先執行，DOM 操作排隊等待，alert 執行完畢後，執行 DOM 操作*

如果希望 alert 也依照事件佇列的順序執行，我們可以使用 setTimeout 的非同步特性寫成如下：

registerMessage.innerHTML = "恭喜您註冊成功！開始逛逛本站吧";
setTimeout("alert('恭喜您註冊成功')", 0);

* 補充文章參考：
* [Day5 單執行緒&非同步發生的血案](https://ithelp.ithome.com.tw/articles/10200054)
* [非同步的 JavaScript 介紹](https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Asynchronous/Introducing)