javaScript--异步和单线程

参考：link.
一、什么是异步？

console.log(100);
setTimeout(function(){console.log(200)},1000)
console.log(300);
//输出顺序200 100

异步和同步最大的区别在于有没有阻塞程序的进行，上面这种情况就没有阻塞程序的进行，程序也没有出现卡顿。如果是同步的，那么就会打印完100，等待1000ms，打印出200，然后才会打印出300.来看如下程序 就是一个同步：

console.log(100)
alert(200)
console.log(300)
//弹出200后，如果不点击确认，程序就会卡在那里，只有等点击了确认，程序才会继续执行

什么时间需要异步？

• 在可能发生等待的情况下

• 等待过程中不能像alert一样阻塞程序运行

• 因此，所有的‘等待情况’都需要异步

二、前端使用异步的场景？

• 定时任务：setTimeout、setInterval

• 网络请求：ajax请求、动态<img>加载

//ajax请求
console.log('start')
$.get('./data.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='./***.png'
console.log('end')

• 事件绑定

console.log('start')
document.getElementById('btn1').addEventListener('click', function() {
    alert('clicked')
})
console.log('end')

三、异步和单线程

• 什么是单线程？

console.log(100)
setTimeout(function() {
    console.log(200)
})
console.log(300)
/打印顺序，100， 300， 200

怎么实现的上述打印顺序？

• 执行第一行，打印100

• 执行setTimeout后，传入setTimeout函数会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）

• 执行最后一行，打印300

• 待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行

• 发现暂存起来的setTimeout中的函数无需等待时间，就会立即过来执行