###### tags: `slide`
# I'll be callback
# JS同步與非同步
#### Backend Camp | Zen
---
# 在介紹callback之前
---
# 何謂同步/非同步
---
<div style="text-align: left;"><font size = "5">
<font color = "yellow">同步：</font>就像接力賽跑，當棒子沒有交給我，我就得等你，不能跑。
<font color = "red">非同步：</font>就像一般我們在點餐時，服務生會給號碼牌，我就可以離開櫃台先去逛街，櫃台也可以繼續為下一個客人點餐，接著只要等號碼牌響起，我再去取餐即可。
</font></div>
---
### 非同步最後完成的順序與接受的順序不一定相同
<div style="text-align: left;"><font size = "4">就是例如A客人點了十道菜，B客人接著只點了一道菜，最後的結果可能會是廚房把B客人的菜先完成。</font></div>
---
# callback function
callback就是將function當作參數傳入另外一個函式裡
---
## 叫我起床的範例(非同步)
```javascript
function clock(set_time){
setTimeout(
function() {
console.log(set_time)
}, Math.random() * 5)
}
function wakeMeUp(){
clock("6am")
clock("7am")
clock("8am")
}
wakeMeUp()
```
<div style="text-align: left;"><font size = "4">
結果(沒有按照順序)：
7am
8am
6am
</font></div>
---
# 鬧鐘沒叫我
---
### 使其變成同步
###### 可以用callback把程式執行的順序改成我們要的
<!-- ```javascript=
function clock(set_time, myCallback){
setTimeout(
function() {
console.log(set_time);
myCallback();
}, Math.random() * 5)
}
function wakeMeUp(){
clock("6am", function(){
clock("7am", function(){
clock("8am", function(){})
})
})
}
wakeMeUp()
```
-->
---
#### 在Node.JS環境中，有些同樣的功能，提供了同步與非同步的函式
<div style="text-align: left;"><font size = "5">同步：</font></div>
```javascript
fs.readFileSync('./README.md')
```
<div style="text-align: left;"><font size = "5">非同步：</font></div>
```javascript
fs.readFile('./README.md', callback(){});
```
---
### Event Loop的[Loupe網站網址:](http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkgewogICAgY29uc29sZS5sb2coIkNsaWNrIHRoZSBidXR0b24hIik7Cn0sIDUwMDApOwoKY29uc29sZS5sb2coIldlbGNvbWUgdG8gbG91cGUuIik7!!!PGJ1dHRvbj5DbGljayBtZSE8L2J1dHRvbj4%3D)
---
{"metaMigratedAt":"2023-06-15T09:03:36.543Z","metaMigratedFrom":"Content","title":"I'll be callback","breaks":true,"contributors":"[{\"id\":\"30e59c9a-3d1d-4bc1-8daa-c97ff56595a3\",\"add\":6220,\"del\":3993}]"}