[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 尽管不需要等待事件,也是要等到其他程序执行完才执行
```
