Day11-同步&&非同步

前言

非同步函式与同步函式是非常多人所误解

1. 同步(Synchronous)函式为逐行运作,当A没完成B会傻傻地等
2. 非同步(Asynchronous)函式为避免程序阻塞,影响到使用体验等等,若A需要时间,会继续执行B,并且若A完成便会呼叫执行A。

先来看一下同步

console.log('1')
console.log('2')

这样就是了?

这跟平常JavaScript有什麽两样???

没错!!! JavaScript其实只有一条主程序(single thread),所以很容易会阻塞。

而当我们要去获取外部的资料,举例: 我要去中央气象局透过api拿温度资料。

我们的步骤如下:

1. 透过呼叫非同步函式(ajax) 去中央气象局帮我拿取资料
2. 在资料没拿回来之前,我先去执行剩余的程序
3. 非同步函式说他OK了(资料回传成功)
4. 主程序再呼叫非同步函式继续执行

更直白的说法,在餐厅中:

1. 服务生先去帮第一组客人点餐
2. 把点餐单传给厨房,厨房会负责制作好餐点
3. 并且继续为下一组客人点餐
4. 接着主厨说第一组餐点好了,这时候正在为第二组人点餐的服务生,必须快点把第二组点完,然後先去厨房把餐点递给第一组客人(也就是结单)
5. 继续为下一组客人点餐

而JavaScript就是使用非同步的方式制造有多工的假象。

其实setTimeout就是web api(非同步函式)

function Getdata() {
  console.log('1');
  setTimeout(function() {
    console.log('2, 等我1秒');
  },1000)
  console.log('3');
}
Getdata()
/*
1
3
2 等我1秒
*/

只要用到web api,不论是否为0秒都要等待被呼叫

function Getdata() {
  console.log('1');
  setTimeout(function() {
    console.log('2, 等我0秒');
  },0)
  console.log('3');
}
Getdata()
/*
1
3
2 等我0秒
*/

明天我们会进入Promise,看Promise如何解决callback的痛点!!!