## **了解非同步.同步控制(asynchronous)**
### - Callback 回呼函式
### - Promise 物件
### - Async/Await 語法 <br><br><br>

#### 以下為正常function使用
<iframe height="265" style="width: 50%;" scrolling="no" title="asynchronous" src="https://codepen.io/zehvifbg/embed/vYNKzeN?height=265&theme-id=dark&default-tab=js" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/zehvifbg/pen/vYNKzeN'>asynchronous</a> by 柯祐民
(<a href='https://codepen.io/zehvifbg'>@zehvifbg</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

#### 這邊為非同步的程式(setTimeout，AJAX，網路連線等都為非同步):
<iframe height="265" style="width: 80%;" scrolling="no" title="非同步範例" src="https://codepen.io/zehvifbg/embed/OJyXoBg?height=265&theme-id=dark&default-tab=js" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/zehvifbg/pen/OJyXoBg'>非同步範例</a> by 柯祐民
(<a href='https://codepen.io/zehvifbg'>@zehvifbg</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe><br><br><br>

#### 解決非同步方法:
1. Callback 回呼函式 : 當這個事件被觸發，就會去執行callback函式也就是說他要滿足函式內的某些條件才會去執行callback函式
**以下為範例:**
<iframe height="265" style="width: 80%;" scrolling="no" title="callback方法" src="https://codepen.io/zehvifbg/embed/jObrvXK?height=265&theme-id=dark&default-tab=js" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/zehvifbg/pen/jObrvXK'>callback方法</a> by 柯祐民
(<a href='https://codepen.io/zehvifbg'>@zehvifbg</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe><br><br><br>

2. Promise 物件 : 建立 Promise 物件: new Promise(執行函式)
**以下為範例:**
<iframe height="265" style="width: 80%;" scrolling="no" title="Promise" src="https://codepen.io/zehvifbg/embed/vYNXEqX?height=265&theme-id=dark&default-tab=js" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/zehvifbg/pen/vYNXEqX'>Promise</a> by 柯祐民
(<a href='https://codepen.io/zehvifbg'>@zehvifbg</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe><br>

- 另外，還可以一次運行多個Promise，但要先多個Promise都完成後，才會繼續動作
**以下為範例:**
<iframe height="265" style="width: 80%;" scrolling="no" title="Promise.all" src="https://codepen.io/zehvifbg/embed/abvmOJv?height=265&theme-id=dark&default-tab=js" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/zehvifbg/pen/abvmOJv'>Promise.all</a> by 柯祐民
(<a href='https://codepen.io/zehvifbg'>@zehvifbg</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe><br><br><br>

3. Async/Await (簡化 Promise語法) : 邏輯與 Promise類同，必須要有一個函式return物件
**以下為範例:**
<iframe height="265" style="width: 80%;" scrolling="no" title="Async/Await " src="https://codepen.io/zehvifbg/embed/dyYpoPX?height=265&theme-id=dark&default-tab=js" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
See the Pen <a href='https://codepen.io/zehvifbg/pen/dyYpoPX'>Async/Await </a> by 柯祐民
(<a href='https://codepen.io/zehvifbg'>@zehvifbg</a>) on <a href='https://codepen.io'>CodePen</a>.
</iframe>

<br><br><br>

寫起來記錄一下