您的位置:

谈谈你是如何理解js异步编程的(js异步编程的四种方法)

谈谈你是如何理解js异步编程的(js异步编程的四种方法)

更新:

本文目录一览:

我对JS异步执行机制的理解

说起JS的异步执行机制,如果百度一下,你首先会发现阮一峰的写过一篇关于异步机制的文章( ),等你津津有味又一头雾水的看完,然后继续看百度的其他结果,然后会发现,阮一峰的这篇被另一个大牛朴灵给批判了

( )。

由此可见,关于异步执行机制到底是怎么回事,因为涉及到浏览器底层机制,所以不容易彻底了解清楚,就算是大牛阮一峰,也只是通过英文文献来了解,而且一知半解。我的这篇文章只是试图尽可能简单的描述一下JS的异步执行机制,坦白说,我现在并不能完全弄懂这个机制,所以也不能完全解释清这个机制,所以,如果我写的越严谨,就越容易出错,我只能简单但是较模糊的描述一下:

JS的运行环境是一个很复杂的环境,它里面有非常多的复杂的名词事物,用简单又不严谨的说法来说,运行环境里至少有下面这些事物:

有一个国外的web app,专门用来讲解异步事件的门道 Loupe ,这个更接近真实情况。为什么我不讲解这个?因为更复杂了,我们并不打算研究浏览器的底层,不是么?

然后说一下任务队列里的任务。所有任务可以分成两种,一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,靠主线程自己就可以执行完成的任务;异步任务指的是,主线程执行开始之后,需要靠主线程之外的线程才能完成的任务。由主线程决定是否要动用其他线程。以下内容,不再提栈,只说主线程。

现在说重点:

异步任务的执行机制是:

当主线程遇到一个异步任务,比如一个ajax请求,当主线程执行到 xhr.send() 的时候,这个send命令是立即执行的, 并不会像一些人想象的,拖到所有同步任务的最后面。 然后主线程向http线程发送指令,要求http线程向服务器发送请求。这里强调一下http线程,显然它不是主线程的一部分,因为它可以并发,如果你有100个ajax请求,每个都需要1秒钟,是不是http线程要花100秒呢?并不是,它会并发100个请求,总共耗时大约1.01秒就完成了。

主线程向以http线程为代表的几个线程发送指令之后,主线程就暂时不再管这个ajax任务了,而是去看任务队列里的下一个任务。

http线程发送了请求之后接收反馈,收到之后,形成一个新的事件(可以叫做“我收到啦!”事件),然后插入到回调函数队列中,因为回调函数队列的优先级很低,所以会排到总队列的最后面,其结果就是:主线程把同步任务都完成了,才开始执行异步事件的 回调 。 注意,并不是异步任务在全体同步任务结束之后才开始,而是异步任务的回调通常在全体同步任务结束之后才开始!异步任务跟异步任务的回调是两回事!是两个任务!一个鲜明的例子就是 setTimeout(fn, 1000) ,计时是从主线程遇到 setTimeout() 任务,然后分配给计时器线程,计时器线程开始干活的时候就开始计时了!只不过要1秒之后 fn 才执行! setTimeout() 和 fn 是两个任务! setTimeout() 是立即执行, fn 才是1秒之后执行。但是 setTimeout() 的执行,人眼是感受不到的,因为并没有什么地方有一个秒表告诉你 setTimeout() 开始执行了;而fn的执行,人眼能感受到,所以人们会错误的以为fn才是异步任务,其实fn并不是, fn 是个回调任务,往往 fn 是同步任务,比如 fn 可能是 console.log(123) ,这怎么会是异步任务。

所以,异步机制是浏览器的两个或以上常驻线程共同完成的,异步请求是JS主线程和其他某个线程共同完成的,JS的执行线程发起异步请求(这时浏览器会开一条新的HTTP请求线程来执行请求,这时JS自己的任务已完成,继续执行线程队列中剩下的其他任务),然后在未来的某一时刻"任务队列"线程监视到之前的发起的HTTP请求已完成, "任务队列"就会把完成事件插入到JS执行队列的尾部等待JS处理 。

最后专门说说定时触发(settimeout和setinterval)。

定时触发是由浏览器的定时器线程执行的定时计数, 然后在定时时间到达之后,定时器线程把定时处理函数的执行请求插入到JS回调队列的尾端。

这个1到底是100毫秒之后弹出,还是1000毫秒(或更多时间)后弹出呢?又或是1100毫秒之后弹出?

答案是,1000毫秒多一点点之后弹出。

原因:浏览器会先执行setTimeout,也就是开始计时,然后开始执行sometask,执行了1000毫秒,然后去回调队列里看回调任务,alert(1);早就恭候了,因为定时100毫秒之后alert(1)就可以执行了。所以,等1000毫秒的任务完成,1就会立即弹出,所以答案是1000毫秒多一点点之后弹出。

所以用这两个函数的时候,实际的执行时间是大于或等于指定时间的,不保证能准确定时的。

最后强调一下setInterval。比如我希望每100毫秒打印一个1。然后,又有极端情况,就是sometask耗时1000毫秒。你以为sometask结束之后会打出10个1么?并不会,只会打出1个1,因为setInterval第一次读秒结束之后,回调队列出现了一个alert(1),根据之前的理论,并不会执行。又过了100毫秒之后,计时器线程会去观察回调队列是不是已经有了alert(1),如果有,就不再往回调队列里加alert(1),目的就是为了避免回调叠加执行。

总之,你需要记住,异步任务就是主线程在任务队列里看到了这个任务,看了一眼之后就然后安排别的线程帮忙,然后主线程就忙别的去了,别的线程帮忙完事之后,再在队列末尾放一个新任务叫“帮忙完毕”,到此异步任务本身就完事。主任务看到“帮忙完毕”任务之后,就去执行回调,回调执行完,这个异步任务连同回调就全都完事。然后,如果并没有回调。。。没有就没有呗。

js的同步、异步是指什么?怎么回事?与线程有关吗?

javascript 异步表示async,指:代码执行不按顺序,‘跳过’执行,待其他某些代码执行完后,再来执行,称为“异步”。

javascript同步表示sync,指:代码依次执行。

就是这么回事

javascript所谓的“线程”,就是这样一种概念

这种情况容易出现在 ajax 当中,因为ajax最可能,也最多用到async 或者 sync的概念属性。

javascript同步和异步的区别与实现方式

javascript语言是单线程机制。所谓单线程就是按次序执行,执行完一个任务再执行下一个。

对于浏览器来说,也就是无法在渲染页面的同时执行代码。

单线程机制的优点在于实现起来较为简单,运行环境相对简单。缺点在于,如果中间有任务需要响应时间过长,经常会导致

页面加载错误或者浏览器无响应的状况。这就是所谓的“同步模式”,程序执行顺序与任务排列顺序一致。对于浏览器来说,

同步模式效率较低,耗时长的任务都应该使用异步模式;而在服务器端,异步模式则是唯一的模式,如果采用同步模式个人认为

服务器很快就会出现12306在高峰期的表现。。。。

异步模式的四种方式:

1.回调函数callback

所谓回调函数,就是将函数作为参数传到需要回调的函数内部再执行。

典型的例子就是发送ajax请求。例如:

$.ajax({

async: false,

cache: false,

dataType: 'json',

url: "url",

success: function(data) {

console.log('success');

},

error: function(data) {

console.log('error');

}

})

当发送ajax请求后,等待回应的过程不会堵塞程序运行,耗时的操作相当于延后执行。

回调函数的优点在于简单,容易理解,但是可读性较差,耦合度较高,不易于维护。

2.事件驱动

javascript可以称之为是基于对象的语言,而基于对象的基本特征就是事件驱动(Event-Driven)。

事件驱动,指的是由鼠标和热键的动作引发的一连串的程序操作。

例如,为页面上的某个

$('#btn').onclick(function(){

console.log('click button');

});

绑定事件相当于在元素上进行监听,是否执行注册的事件代码取决于事件是否发生。

优点在于容易理解,一个元素上可以绑定多个事件,有利于实现模块化;但是缺点在于称为事件驱动的模型后,流程不清晰。

3.发布/订阅

发布订阅模式(publish-subscribe pattern)又称为观察者模式(Observer pattern)。

该模式中,有两类对象:观察者和目标对象。目标对象中存在着一份观察者的列表,当目标对象

的状态发生改变时,主动通知观察者,从而建立一种发布/订阅的关系。

jquery有相关的插件,在这不是重点不细说了。。。。回头写个实现贴上来

4.promise模式

promise对象是CommonJS工作组提供的一种规范,用于异步编程的统一接口。

promise对象通常实现一种then的方法,用来在注册状态发生改变时作为对应的回调函数。

promise模式在任何时刻都处于以下三种状态之一:未完成(unfulfilled)、已完成(resolved)和拒绝(rejected)。以CommonJS

Promise/A

标准为例,promise对象上的then方法负责添加针对已完成和拒绝状态下的处理函数。then方法会返回另一个promise对象,以便于形成promise管道,这种返回promise对象的方式能够支持开发人员把异步操作串联起来,如then(resolvedHandler,

rejectedHandler); 。resolvedHandler

回调函数在promise对象进入完成状态时会触发,并传递结果;rejectedHandler函数会在拒绝状态下调用。

Jquery在1.5的版本中引入了一个新的概念叫Deferred,就是CommonJS promise A标准的一种衍生。可以在jQuery中创建

$.Deferref的对象。同时也对发送ajax请求以及数据类型有了新的修改,参考JQuery API。

除了以上四种,javascript中还可以利用各种函数模拟异步方式,更有诡异的诸如用同步调用异步的case

只能用team里同事形容java和javascript的一句话作为结尾:

“写java像在高速路上开车,写javascript像在草原上开车”-------------以此来形容javascript这种无类型的语言有多自由

but,如果草原上都是坑。

js异步是什么意思,怎么理解js异步思想呢?

就是网页在加载的时候注册事件,但是只有在点击等事件发生后才会触发函数

谈谈你是如何理解js异步编程的(js异步编程的四种方法)

本文目录一览: 1、我对JS异步执行机制的理解 2、js的同步、异步是指什么?怎么回事?与线程有关吗? 3、javascript同步和异步的区别与实现方式 4、js异步是什么意思,怎么理解js异步思想

2023-12-08
js代码同步异步的简单介绍

本文目录一览: 1、怎样用JS实现异步转同步 2、JS Promise 同步和异步代码执行的区别 3、javascript同步和异步的区别与实现方式 4、js执行顺序+同步异步 5、js 是同步执行

2023-12-08
script异步php,javascript异步编程

2023-01-06
js中异步编程方案的演进,js异步发展史

本文目录一览: 1、如何进行nodejs异步编程 2、如何优雅处理 async await 错误——解读小而美的 awaitjs 库 3、我对JS异步执行机制的理解 4、如何在一个类中实现异步 5、j

2023-12-08
关于js代码同步异步的信息

2022-11-25
js函数式编程概念(js是函数式编程语言吗)

本文目录一览: 1、js 是更倾向于函数式编程了还是更倾向于面向对象 2、JS函数式编程和递归探索:路由树的操作 3、js 什么是函数式编程 4、前端必学-函数式编程(六) 5、js函数式编程思想就是

2023-12-08
js函数式编程应用js,js 函数式编程

本文目录一览: 1、js函数式编程思想就是运算不改变值只是新建值吗? 2、函数式编程 vs 面向对象编程 vs 过程式编程的JS演示比较 3、前端必学-函数式编程(六) 4、JS编程是什么意思? 5、

2023-12-08
异步javascript递归,js递归理解

2022-11-23
我对js开发程序语言的理解(浅谈程序设计语言的认识)

本文目录一览: 1、JS编程是什么意思? 2、"JavaScript"是一种什么样的语言? 3、JavaScript是什么? 4、javascript是什么样的编程语言? 5、JS是什么语言 JS编程

2023-12-08
js代码总结体会,js基础知识总结笔记

本文目录一览: 1、js到底难不难学? 2、JS 代码 求解释 可以详细的 说明一下 谢谢 3、浅谈js写轮播图的思路与心得 4、JavaScript与WEB前台开发课程实训总结怎么写 5、js中继承

2023-12-08
js编程大全(js编程教程)

本文目录一览: 1、前端开发必学的技术有哪些? 2、求推荐html到css到js相关的书籍 3、想做web前端的工作,应该先学什么? 4、前端必看的书籍 5、简述一个JavaScript脚本的基本结构

2023-12-08
js程序员100道题(js基础编程题)

本文目录一览: 1、JS菜鸟问题 获取个位,十位,百位,千位,上的数值 2、求asp.net程序员的面试题(asp.net、javascript、mssql、xml)? 3、Node.js常见面试题

2023-12-08
简化js编程(js代码编写)

本文目录一览: 1、使用JS函数简化代码 2、这一段JS应该如何简化? 3、请高手帮我简化下面这段js代码,看s1,s2,s3,s4,s5,s6....能不能写成个循环,这样就不用每次修改js了,谢谢

2023-12-08
java笔试题(java笔试题编程题)

2022-11-08
js高级程序设计笔记14(js高级程序设计笔记14页)

本文目录一览: 1、JavaScript高级程序设计 该怎么看 2、JavaScript学习笔记之数组基本操作示例 3、JS中有关sort以及return的问题 JavaScript高级程序设计 该怎

2023-12-08
如何提高js的编程水平(如何提高编程技术)

本文目录一览: 1、怎么提高javascript编程水平? 2、js软件开发工程师的逻辑思维可以怎么培养? 3、怎么学好js? 4、看完javascript高级程序设计后怎么尽快提升实战能力 5、想成

2023-12-08
htmljs编程笔记(html代码笔记)

本文目录一览: 1、html代码和JS代码有什么区别 2、如何在html中调用js函数 3、JavaScript学习笔记之数组基本操作示例 4、HTML5初学者笔记 5、《web前端笔记7》js字符—

2023-12-08
js如何同步执行代码的简单介绍

本文目录一览: 1、JS方法怎么同步执行 2、js怎么进行同步执行 3、如何实现 javascript “同步”调用 app 代码 JS方法怎么同步执行 方法1 内部用了var 表示内部变量 执行完一

2023-12-08
js切面编程(js 切割)

本文目录一览: 1、JS编程是什么意思? 2、初级java面试,面试官是如何出题的 3、前端开发需要学什么啊? 4、js的模块化编程有哪些方式 5、什么叫前端编程 JS编程是什么意思? js就是Jav

2023-12-08
php异步计算,php异步调用

2022-11-17