[TOC]
## 異步
### 什么是異步
```
console.log(100)
setTimeout(function(){
console.log(300)
}, 1000)
console.log(200)
//輸出順序 100,200 300
```
### 使用場景
- 定時任務: setTimeout, setinverval
- 網絡請求:ajax請求,動態`<img>`加載
```
//ajax 請求
console.log('start')
$.get('.data1.json',function(data){
console.log(data)
})
console.log('end')
```
```
///加載 img
console.log('start')
var img = document.createElement('img')
img.onload = function(){
console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')
//輸出順序 start end loaded 因為要等到圖片加載完才會觸發 onload 事件
```
- 事件綁定
```
console.log('start')
document.getElementById('btn1').addEventListener('click',function(){
alert('clicked')
})
console.log('end')
```
## 單線程
1. 執行第一行,打印100
2. 執行 settimeout后,傳入 settimeout的函數會被暫存起來
3. 不會立即執行(單線程的特點,不能同時干兩件事)
4. 執行最后一行,打印300
5. 待所有程序執行完,處于空閑狀態時,會立馬看有沒有暫存起來的要執行。
6. 發現暫存起來的 settimeout中的函數無需等待時間,就立即來過來執行
```
console.log(100)
setTimeout(function(){
console.log(300)
}, 0)
console.log(200)
//輸出順序 100 200 300 盡管不需要等待事件,也是要等到其他程序執行完才執行
```
