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. 闹钟)

<<:  Day30 参加职训(机器学习与资料分析工程师培训班),Tensorflow.keras

>>:  恳求解答

Day23 - 将台湾证券交易所的每日收盘行情存入 DB

前言 前面已经知道如何抓「台湾证券交易所」的每日收盘行情 CSV 档,接下来要处理资料,并存入 DB...

Day11 - 套用 Tag Helper - 复杂型别 object + collection

本篇 Controller、ViewModel 跟 Day08 范例差不多 依照 View 的差异,...

每个人都该学的30个Python技巧|技巧 28:想像力就是超能力,快试着自己创造模组(字幕、衬乐、练习)

之前都是教Python内建的函式,今天就要升级罗~今天要教到的是模组,模组跟函式一样都是可以自己创造...

Day-6:开发专案为什麽写测试?

测试系虾米? 丢系试试看目前这个东西有没有达到理想状态,或者有没有不足的地方? 坏掉…等,当然,不可...

[神经机器翻译理论与实作] 重新检视有无注意力机制的Encoder-Decoder

前言 今天是个美丽的错误,本来预计将昨日写好的 Encoder 、Decoder 、 LuongAt...