iT邦幫忙

1

Javascript 執行環境、作用域 - 執行緒與同步、非同步

function eatBreakfast () {
  console.log('吃早餐');
}

function washingPlate () {
  console.log('洗餐盤');
}

function callSomeone (someone) {
  console.log('打給' + someone);
  
  setTimeout(function () {
      console.log(someone + '回電');
  }, 3000);

}

function doWork () {
  var auntie = '水阿姨';
  eatBreakfast();
  callSomeone(auntie);
  washingPlate();
}

doWork();

上面這個範例可以一次瞭解到執行緒與同步、非同步的概念

讓我們來解析一下他的程式碼吧:

Javascript 是單執行緒的程式

單執行緒 是一種作業系統的運行概念,一次只能做一件事。

https://ithelp.ithome.com.tw/upload/images/20210810/20140506YUA40Z1kaC.png

如圖所示,小明一次只能做一件事,等到做完以後才能按照順序做下一件事。

相對的,多執行緒 的概念就是可以同時執行上述的三件事情

但可以看到 打給漂亮阿姨 這段有 setTimeout 的非同步事件

  • 單執行緒 > 系統地執行
  • 非同步 > 針對程式語言的本身

Javascript 同步、非同步

非同步的任務會先移動到 事件佇列(Event Queue) 中,等到所有的同步事件執行完之後,才會執行非同步。

這裡我們使用執行堆疊的概念來看一下這段程式碼的運作方式

https://ithelp.ithome.com.tw/upload/images/20210810/20140506QQv47BBqpt.png
https://ithelp.ithome.com.tw/upload/images/20210810/201405064PBvAyFrVT.png

非同步事件整理

  • setTimeout 只會執行一次就結束
  • setInterval 會在間隔固定的時間不斷重複

使用者觸發的行為也算是非同步事件:

<body>

<p>點我</p>
<script>
    function clickThis () {
        console.log('click');
    }

    var dom = document.querySelector('p');

    dom.addEventListener('click', clickThis, false);
</script>
  
</body>

除了使用者互動之外,還有三件事會用到非同步:

  1. 網路請求 (eg. ajax)
  2. 檔案系統操作 (讀取/ 寫入檔案等)
  3. 會故意延遲時間的功能 (eg. 鬧鐘)

尚未有邦友留言

立即登入留言