js中同步和异步解析

在前端程序执行中,为了避免程序运行被阻塞,在js中有3类场景为异步执行,异步执行语句在程序执行完成后,才会被执行。

什么时候需要异步:
1. 在可能需要等待的情况
2. 等待过程中不能像alert一样阻塞程序执行

3. 因此,所有需要“等待的情况”都需要异步

异步示例:

console.log(100)
setTimeout(function(){
  console.log(200)
},100)
console.log(300) // 打印顺序为 100 300 200
同步例子
console.log(100)
alert(200)
console.log(300) // alert为同步函数  需要alert点击确认 程序才能往下执行;同步会阻塞代码执行

前端使用异步的场景:

1. 定时任务:setTimeout,setInverval
2. 网络请求:ajax请求,动态<img>加载

3. 事件绑定

ajax请求代码示例
console.log('start')
$.get('./data.json',function(data){
  console.log('data)
})
console.log('end') // 打印顺序 start end data

img加载示例
console.log('start')
var img = doucument.createElement('img')
img.onload = function(){
  console.log('loaded)
}
img.src = './xxx.png'
console.log('end') // start end loaded

事件绑定示例
console.log('start')
document.getElementById('btn').addEventListener('click',function(){
  alert('clicked')
})
console.log('end') // 顺序为  start end 按钮点击时  弹出alert框
另外有关异步和单线程,js是单线程语言,浏览器只分配给js一个主线程,用来执行任务(函数),每次执行只能执行一个任务,这些任务形成一个任务队列排队等候执行,但前端的某些任务是非常耗时的,比如网络请求,定时器和事件监听,如果这些事件也等待执行的话,执行效率会非常的低,甚至会导致页面的假死。
console.log(100)
setTimeout(function(){
  console.log(200)
},100)
console.log(300) // 打印顺序为 100 300 200

所以异步的函数在执行时,程序先会将异步函数抽离出线程放在一旁,等代码执行完
再来执行异步函数
理解js的同步和异步区别,有助于我们对js单线程机制的理解。本文结。


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页