Day-17　同步、非同步与事件循环

JavsScripe是一套非同步的、单执行绪（single-threaded）语言，任务与任务之间必须「排队」执行。为了避免任务塞车祸无限循环，设计者给出了呼叫堆叠（call stack）、事件循环（event loop）、回调储列（callback queue）与API等特性。

为了避免任务塞车、拖累效率等问题，JavsScripe将待命中的任务分为Sync与Async两大类。首先，须先了解Event loop的结构。

事件循环 Event Loop

（示意图）

JavsScripe引擎

• 用来将我们写的 code 转成让机器看得懂的语言。
• JavsScripe本身会有一个，而 WebAPI 也会有一个，每个 WebAPI 的引擎不同，最有名的是 chrome 的 V8 引擎。

stack 堆叠

• JavsScripe是单执行绪的程序，使用的资料结构为（後进後出）。
• 有的函式如 setInterval、setTimeout 不是原本JavsScripe的引擎有的函式，执行时会先跑到JavsScripe的 stack 里 ，接着马上跑到 WebAPI 执行。
• 再来会跑到 Callback Queue 里排队，等到 stack 的东西执行完再执行 Queue 里的函式。
• 其中有的函式会被归类在 Microtask Queue 当中，他们有特权、是高等的 Queue，会比一般在 Queue 执行的 task 还更优先执行。

深入了解，可参考影片Stack and Queue。

Sync 同步执行/单执行绪：

JavsScripe本质为Sync，一次只能做一件事，使用的资料结构为 stack 堆叠(後进後出)。

如果用函式让他一直循环，到最後记忆体会满出来，出现Ranger Error，称做stack overflow。这与无穷回圈不太一样，无穷回圈只会卡住，不会出现错误讯息。

Async 非同步执行

非JavsScripe内建语法如 setTimeout 的 callback 不会卡在 stack 区块里。

具体上，一开始会先在 stack 区块出现，接着瞬间丢给 Runtime(执行环境：浏览器或node) 执行，等设定的时间过了之後，接着来到 Queue 排队区(会按照顺序排列)，最後等 stack 区块里的程序码跑完，setTimeout 的 callback 才会跑到 stack 区块执行结果。例：

console.log (1)
console.log (2)
setTimeout ( () => {console.log(4);}, 3000)  //最快3秒後印出4
console.log (3) //最後印出 1, 2, 3, 4