[学习笔记] Javascript 的同步(synchronous)与非同步(asynchronous) 和 Event

本篇参考连结
PJCHENder笔记

Synchronous vs Asynchronous

Definition

一般来说, JavaScript Engine 是以 Synchronous 来执行的, 但在浏览网页时, 也是需要随时监听一些 DOM 事件, 例如侦测滑鼠的点击, 滑动等这类的非同步呼叫( asynchronous callback ). 首先必须注意, JavaScript Engine 在浏览网页的过程中只是其中一部分, 其他还包含像是 Render Engine 和 http request. 也就是说, 整个网页执行的过程中, 可以是非同步的, 但单就 JavaScript Engine 而言, 还是以同步来逐行执行.

图片截自：[Udemy] JavaScript: Understanding the weird parts

Asynchronous Callback

JavaScript Engine 执行 Async Callback 的流程是先把所有 Execution Context 的内容执行完毕后, 才会执行 Event Queue 里面的 callback.

/*Copy from JavaScript: Understanding the weird part*/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");

首先有建立函式 waitThreeSeconds(), 会让网页等待三秒后, 回在 console 出现 "finshed function" . 再沿着往下执行会看到有添加 Event Listener, 用来监听 Click的 Event, 并当事件触发时, 会执行 callback function clickHandler.

在执行时候, 会先点击滑鼠几下, 然后来看最后的结果.

"started execution"
"finished function" // 网页停滞三秒后
"finished execution"
"click event!"

由上面的範例可以发现, 程式会先把所有程式跑完, 才会去执行 Event Queue 里面的 callback. 所以虽然一开始就点击滑鼠, 但 "click event!" 却是最后才出现.