JS核心(9)-執行環境與作用域-執行緒與同步、非同步

前言

進入 JavaScript 中常見的 JavaScript 非同步、同步以及單執行緒的問題

執行緒

簡單來講執行緒就是它可以同時做幾件事情，例如你可以打開 AI軟體又打開 Chrome 然後再打開 PS 軟體等等…而這些行為都可以交由給各個執行緒處理，這樣子的好處在於我們不會因為打開 AI軟體而導致打開 Chrome 結果 PS 軟體 Lag 等問題

而 JavaScript 是一個單執行緒的程式語言，因此它 一次只能做一件事情 ，因此 JavaScript 必須先做完某一件事情，才能去做其他事情，以生活化的例子來講小明只能先吃完早餐再打給漂亮阿姨最後再去洗碗，他一次只能做一件事情

若小明吃早餐同時又打電話給漂亮阿姨並且又洗碗，那麼這就是多執行緒

---

同步與非同步

同步的概念，就是當程式碼執行時他一定會依序做完才往下做，例如以下程式碼

function a() {
  console.log('a');
}
function b() {
  console.log('b');
}
function c() {
  console.log('c');
}
a();
b();
c();

以上面程式碼舉例來講，他一定會等 a() 執行完畢才執行 b()，在同步的概念中絕對不會因為 a() 還在取得資料中而跳到 b()

如果是非同步的話，那又會怎麼樣呢？這邊舉例一個非同步的範例程式碼

function a() {
  console.log('a');
}
function b() {
  setTimeout(() => {
    console.log('b');
  }, 1000);
}
function c() {
  console.log('c');
}
a();
b();
c();

在這邊你會發現結果是 a、c 最後才是 b，這是因為在非同步語言中，若該取得資料的行為需要時間才能夠回來的話，那麼就會被放入一個叫做事件佇列 (Event queue)

因此 JavaScript 在執行上述程式碼時，會等全部程式碼都執行完畢，才去看 Event queue 中的事件執行完畢了沒有

---

件佇列 Event queue

我們將範例程式碼改成以下，那麼你會發現結果也是一樣的

function a() {
  console.log('a');
}
function b() {
  setTimeout(() => {
    console.log('b');
  }, 0);
}
function c() {
  console.log('c');
}
a();
b();
c();

原因是因為 JavaScript 一定會等 a()、c() 執行完畢後才去看 Event queue 中的 b() 執行完畢了沒有