技術筆記

如果以中文字面上的意思看，我會覺得完全相反，讓我很傻眼哈哈哈，每次看都要腦袋裡重新想一次，很不直觀XD

前因後果

Javascript本身是同步語言，在瀏覽器中的JavaScript引擎執行，所以是從上到下逐行程式讀取並執行，然而當有程式碼比較花時間，可能會導致整個專案卡住，為解決這個狀況，發展出非同步。

摘要

• 同步
  • 一次只做一件事
  • 如果前面耽擱，整個會阻塞(block)，就像當機一樣，直到該程式跑完，才會有動靜
• 非同步
  • 同時多工

JavaScript Runtime Environment(JRE)

• 同步流程
  • 於JavaScript引擎內完成
    • 全域執行環境
    • 執行環境堆疊：後進先出
    • 記憶體堆積
• 非同步流程

  console.log("開始");
  
  setTimeout(function() {
  console.log("這是一個非同步操作，將在2秒後執行");
  }, 2000);
    setTimeout(function() {
  console.log("這是一個非同步操作，將在1秒後執行");
  }, 1000);
  
  console.log("繼續執行其他程式碼");
  
  結果：
  //開始
  //繼續執行其他程式碼
  
  //這是一個非同步操作，將在1秒後執行
  //這是一個非同步操作，將在2秒後執行
  

  如果把延遲秒數改成0秒，輸出結果跟上面例子一模ㄧ樣，而非照順序執行，這是因為當JavaScript引擎看到setTimeout時，會直接往下執行，並於 計時完成後把setTimeout要做的事放進Event Queue，等待JavaScript執行環境全部淨空後才逐一檢查Event Queue裡等待執行的內容並將其推回執行環境執行
  • Event Table：負責記錄非同步目的達成後，有哪些函式或事件要被執行，JavaScript引擎在看到setTimeout會將一些附加訊息如倒數秒數丟到這裡，在倒數完後（即非同步目的達成）就把該函式推送到Event Queue
  • Event Queue:先進先出 ，非同步函式或事件儲列之處，也叫callback queue
  • Event Loop：負責檢查執行環境與Event Queue，如果執行環境堆疊是空的，則檢查Event Queue，如果內有函式等待執行則將之推到執行環境並執行

心得

不是太難理解，只是專有名詞很多，簡單想就是因為JavaScript引擎同步作業的關係，為防止因非同步函式造成整個專案卡住的狀況，把這些非同步函式拉到Event Queue中排隊等待主執行環境被執行的整個流程。

參考資料

• 書 JavaScript概念三明治：基礎觀念、語法原理一次帶走！（第6章）

童言童語

努力看完天書後，來點輕鬆的吧！分享我兒子的童言童語，調劑身心一下

5歲樂咖+2歲嗨啾 = 我的神奇寶貝 皮咖啾

昨天要出門前
阿嬤：哇！你戴帽子好帥喔！
啾啾：還可以！