(Day3) 执行绪与同步&非同步

单执行绪

JavaScript 是单执行绪的语言，而单执行绪的意思就是一次只做一件事情。

不过这样的话 单执行绪 的 JavaScript ， 一旦程序码时遇到卡住的地方 (阻塞)，整个程序码不就是应该卡住无法使用？

就是为了解决这个问题， JS 中有部分方法是使用非同步来避免这件事。

非同步(Asynchronous)

什麽是非同步？

先来说说什麽是同步(Synchronous)，同步的意思就是，当程序码执行时他一定会依序做完才往下做，例如以下程序码:

function Fn1(){
console.log('我第一')
}
function Fn2(){
console.log('我第二')
}
function Fn3(){
console.log('我第三')
}
Fn1() 
Fn2() 
Fn3() 

以上 console 显示的一定会是按照顺序显示， 我第一 ⇒ 我第二 ⇒ 我第三 ，这种会按照顺序执行的程序码部分就被称做『同步』。

理解好什麽是同步後，非同步自然比较好理解，自然就是同步的反义词，不会依照顺序执行，例如以下程序码：

function Fn1(){
console.log('我第一')
}
function Fn2(){
setTimeout(() => {
    console.log('我第二')
  }, 0);
}
function Fn3(){
console.log('我第三')
}
Fn1()
Fn2() 
Fn3() 

这边使用 setTimeout() 来模拟非同步语法，可发现显示出来的顺序会是， 我第一 ⇒ 我第三 ⇒ 我第二 ，之所以顺序是这样，是因为 JavaScript 有一个称做 事件循环（event loop）的特性来处理非同步语法。

JavaScript 中常见的非同步语法有：

• setTimeout() 及 setInterval() 定时器。
• fetch 、 XMLHttpRequest 等等处理 Ajax 行为的语法。
• ES6 新增的 Promise 。

事件循环 (event loop)

event loop 的作用是去监控堆叠（call stack）和工作伫列（task queue），当堆叠当中没有执行项目的时候，便把伫列中的内容拉到堆叠中去执行。

上面引用 pjchender 大大 文章中提到的一段话，这段话个人认为，确实是最好理解事件循环的一段话，在(Day1)执行环境与执行堆叠有提到，在函示中呼叫另一个函示会造成堆叠状况（call stack），虽然称做堆叠，但这种状况其实是属於同步的状况。

而工作伫列（task queue）则是 JavaScript 这语法专门存放非同步语法的地方。

也就是说 事件循环 特性就是，非同步语法会等待 同步语法 执行完毕接着才被执行，这边也使用一段程序码查看这个特性：

setTimeout(function () {
      console.log('非同步');
    }, 0);
    function test() {
      for (var i = 1; i <= 10; i++) {
        (function () {
          console.log(i)
        })()
      }
    }
    test()

呼叫 test() 这个函示会在 console 依序显示 1、2、3 ...10 。
运行上面范例会是先显示完 1、2、3 ...10 ，最後才显示 非同步 的字串，如果你觉得你的电脑够好，也可以试者把 for 回圈改成执行 10 万次，结果也会是非同步字串最後才显示。

参考文献

• JavaScript 核心篇 (六角学院）
• JavaScript 核心观念(9)-执行环境与作用域-执行绪与同步、非同步
• [JS] 理解 JavaScript 中的事件循环、堆叠、伫列和并发模式（Learn event loop, stack, queue, and concurrency mode of JavaScript in depth）
• 所以说event loop到底是什麽玩意儿？| Philip Roberts | JSConf EU