js中同步和异步解析

原创 2018年04月15日 15:09:43

在前端程序执行中,为了避免程序运行被阻塞,在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单线程机制的理解。本文结。


第04章-计算机常用通信指标和术语

本课程主要内容如下: 1 bit、Byte、KB、MB、GB、TB概念和换算关系 2 波特率、比特率、误码率的概念和意义 3 信道、基带信号、频带信号 4 频分多路复用、时分多路复用、异步传输、同步传输
  • 2017年02月27日 18:11

js中的同步和异步的个人理解

你应该知道,javascript语言是一门“单线程”的语言,不像java语言,类继承Thread再来个thread.start就可以开辟一个线程,所以,javascript就像一条流水线,仅仅是一条流...
  • qq_22855325
  • qq_22855325
  • 2017-06-09 15:09:05
  • 14874

深入理解JavaScript编程中的同步与异步机制

JavaScript的优势之一是其如何处理异步代码。异步代码会被放入一个事件队列,等到所有其他代码执行后才进行,而不会阻塞线程。然而,对于初学者来说,书写异步代码可能会比较困难。而在这篇文章里,我将会...
  • u013063153
  • u013063153
  • 2016-09-07 10:39:09
  • 17478

js中同步与异步处理的方法和区别

在使用异步请求时,有时需要将异步请求的结果返回给另一个js函数,此种情况下会出现未等异步请求返回请求结果,该发送请求所在js函数已经执行完后续操作,即已经执行return ,这样会导致return的结...
  • u012985523
  • u012985523
  • 2013-12-25 14:42:23
  • 1149

js 同步和异步 的理解

1、同步加载又称为阻塞模式,会阻止浏览器的后续处理,所以js默认为同步执行。为了减少阻塞,建议把放到之前,这样根据浏览器加载顺序,会先加载页面,把页面进行渲染; 2、异步模式就是在下载执行js时,还...
  • zx_p24
  • zx_p24
  • 2016-10-11 16:59:48
  • 1612

js解析xml文档设置 同步/异步加载

js解析xml文档     //获取解析器对象     function xmlDom(){         var xmlDOM;         //ActiveXObject ...
  • WenwenFighting1314
  • WenwenFighting1314
  • 2016-10-01 11:16:44
  • 435

理解javascript的同步与异步模式

你可能知道,Javascript语言的执行环境是"单线程"(single thread)。 所谓"单线程",就是指一次只能完成一件任务。如果有多个任务,就必须排队,前面一个任务完成,再执行后面一个任...
  • memeda_bupt
  • memeda_bupt
  • 2016-03-23 11:34:38
  • 4360

JavaScript同步、异步、回调执行顺序分析

之所以会写这篇文章,是因为在做笔试题的时候,会遇到一题很经典的题目,关于setTimeout的输出结果,下面我们先来看一道题目: for (var i = 0; i < 5; i++) { s...
  • u010297791
  • u010297791
  • 2017-05-04 10:11:09
  • 3493

JavaScript:彻底理解同步、异步和事件循环(Event Loop)

一. 单线程 我们常说“JavaScript是单线程的”。 所谓单线程,是指在JS引擎中负责解释和执行JavaScript代码的线程只有一个。不妨叫它主线程。 但是实际上还存在其...
  • alex8046
  • alex8046
  • 2016-07-15 01:10:01
  • 6557

js ajax 异步 同步 区别

ajax 同步异步的区别
  • ling369523246
  • ling369523246
  • 2015-09-17 22:29:45
  • 1938
收藏助手
不良信息举报
您举报文章:js中同步和异步解析
举报原因:
原因补充:

(最多只允许输入30个字)