1、异步和同步
console.log(a)
setTimeout(function() {
console.log(b)
},1000)
console.log(c)
不考虑异步,程序执行顺序(同步执行)为先打印a,1s后打印b,最后打印c;
实际上执行顺序(异步执行)是先打印a,再打印;c,1s后打印b;
由此可见异步和同步是区别在于执行顺序不同和是否阻塞程序运行——异步不阻塞,同步阻塞;
2、前端异步使用场景
异步可以不阻塞程序的运行,能够让需要”等待“的程序后面的代码正常继续执行,所以当程序中有”等待“的情况时需要异步:
1) 定时任务:setTimeout,setInverval
2) 网络请求:ajax请求,动态<img>加载
//Ajxa请求示例:如果是同步执行,就需要等待Ajxa请求完成才能执行后面的程序,而Ajxa请求的时间是不确定的,网络环境、服务器、接口本身等情况都会影响请求时间,所以需要异步执行。
console.log('start')
$.get('./data1.json', function() {
console.log(data1)
})
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')
如果是同步执行,就需要等待图片加载完成后才能继续执行,而图片资源的加载的时间同样受网络坏境、服务器等情况的影 响,所以也需要异步执行
3) 事件绑定:用户什么时候操作是不确定的
//事件绑定示例
console.log('start')
document.getElementById('btn1').addEventListener('click', function () {
alert('clicked')
})
console/log('end')
3、异步和单线程
console.log(1000)上面代码执行的顺序:
setTimeout(function() {
console.log(2000)
})
console.log(3000)
1)执行第一行,打印1000
2)定时器函数会被暂存起来,不会立即执行(单线程的特点,不能同时干两件事)
3)执行最后一行,打印300
4)待所有程序执行完,处于空闲状态时,会查看暂存起来的定时器函数
5)执行定时器函数,打印3000
JavaScript是单线程的,不能同时干两件事,所以当有异步时,异步程序会被暂存起来,等后面的程序执行完在执行异步程 序。