[筆記] JavaScript 的基本觀念 – 5 – Asynchronous @地瓜大的飛翔旅程

章節連結

課程對應章節
內容
JavaScript 全攻略系列文章

Asynchronous 顧名思義就是在同一時間內，同時執行不只一個動作(More than one at a time)。你可以想像成在廚房準備早餐時，你可以先把麵包放進烤吐司機、同時準備熱水來泡咖啡和煎蛋，當麵包烤好時，咖啡泡好了且蛋也煎了一半了。這樣的動作相對於 synchronous ，可以加快處理速度。不過我們人腦預設程式會由上到下一行行的編譯執行，所以也會產生一些邏輯上的誤區。

課程對應章節

Course 18 (全部一共有 85 Courses)

請注意：本系列文章為個人對應課程的消化吸收後，所整理出來的內容。換言之，並不一定會包含全部的課程內容，也有可能會添加其他資源來說明。課程連結網址：http://tinyurl.com/w7vrql6

內容

1. JavaScript 引擎本身是 synchronous 在運行的。不過整個瀏覽器的瀏覽網頁過程中，可以以非同步的方式(asynchronous)來執行像是 render engine, http request 的操作。
2. JavaScript 引擎會將 asynchronous 的事件(如：滑鼠點擊)，加到事件佇列(Event Queue)中。等到所有位於 execution context 的內容(function stack 中的所有函式)進行完畢後，再來執行 Event Queue 中的內容。
3. 總言之，JavaScript 的 Asynchronous 表現是在 JavaScript Engine 之外的 Event Queue 中，至於引擎本身還是同步(synchronous)進行的。

/*影片範例*/
function waitThreeSeconds(){
 var ms = 3000 + new Date().getTime();
 while(new Date() < ms){}
 console.log("finished function");
}

function clickHandler(){
 console.log("click event!");
}

document.addEventListener('click', clickHandler);
console.log("started execution");
waitThreeSeconds();
console.log("finished execution");

/*當你打開瀏覽器運行此串代碼時，縱使你載入一開始就點了頁面一下，是在 finished execution 之後才會看到 click event 的字樣*/