以jQuery中$.Deferred对象为例讲解promise对象是如何处理异步问题_jquery

~
Promises是一种令代码异步行为更加优雅的抽象，它很有可能是JavaScript的下一个编程范式，一个Promise即表示任务结果，无论该任务是否完成。

在一些现代浏览器中已经提供了原生的Promise对象，其遵循Promise/A+标准。在jQuery1.5+，提供了$.Deferred（其可以被转化为promise对象）。很多知名的框架中，也提供了promise对象。promise对象在javascript中已经是一种很重要的模式，它在解决异步问题时表现出的优雅，正是javascript所需要的。以下以jQuery中的$.Deferred对象为例，来看一下promise对象是如何处理异步问题。关于$.Deferred对象，可以到jQuery官网查看，这里就不赘述了。


一、封装异步操作


首先，我们以加载图片为例，看以下代码：


以上的代码，我封装了图片加载的操作，将他们委托给$.Deferred，最后生成一个promise返回。使用这样的方式，相比用对外暴露回调的方式，显得更干净、更清晰。这么做的另一个更重要的原因是，promise的连接。


二、promise的连接

我们还是以上面图片加载的代码为例，来看一下如何做promise的连接，看以下代码：


promise对象提供了then的方法，它接受两个回调：onResolve和onReject，在回调中返回promise，就可以完成promise之间的连接。通过这种方式，可以使异步操作串行的执行。


同时，jQuery还提供了另外一种连接方式，看代码：


jQuery中提供了$.when这个函数，它可以接受n个promise对象为参数，它是将promise的执行结果连接在一起。使用这种方式，多个异步操作可以并行执行。


三、The End

这里的代码是以加载图片为例，同样的做法可以应用到其他的异步操作中去。比如jQuery中的$.ajax、$.fn.animate，调用它们返回的就是promise。在node端，也可以把一些异步操作（读数据库、读文件等）封装成promise。继而对多个promise实现合并的操作，使其串行或者并行执行。


附：deferred对象

deferred除了用于转化promise对象外，本身也是个很有用的对象。它除了提供像promise对象的那些方法和属性外，还有notify函数和progress函数，这两个函数在实现进度条和瀑布流的时候，有很大的用处。


在实现进度条时，resolve和done函数可以用于定义进度条读取到100%时的触发时机和触发逻辑，notify和progress函数可以用于定义进度条在读取中的触发时机和触发逻辑。reject和fail函数可以用于定义进度读取失败时的触发时机和触发逻辑。


在实现瀑布流时，resolve和done函数可以用于定义当数据已经全部加载到页面的触发时机和触发逻辑，notify和progress函数可以用于定义瀑布流读取下一页的触发时机和触发逻辑。

---

太平区18247705993： jQuery中的Deferred和promise 的区别 - ？
右宝分清： 一个 deferred对象 能做的和一个promise对象差不多,但是它有两个函数来触发 done()和fail()函数 .一个deferred对象拥有一个resolve()函数来处理一个成功的结果并执行与done()相关的函数.reject()函数则用来处理失败的结果并执行与fail()相关的函数.你可以给resolve()和reject()函数都提供参数,然后它们都将传递给与done()和fail()相关的回调函数.总结jQuery 的ajax 就是返回一个promise 对象,里面含有done(), fail()方法; deferred 就是实现返回这个promise 对象的过程.

太平区18247705993： jquery deferred都有哪些常用的方法?分别是什么作用 - ？
右宝分清： http://www.ruanyifeng.com/blog/2011/08/a_detailed_explanation_of_jquery_deferred_object.html

太平区18247705993： jquery报错jQuery.Deferred exception: $(...).error is not a function - ？
右宝分清： 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们都不是立即能得到结果的. 通常的解决方法是,为它们指定回调函数(callback).即事先规定,一旦它们运行结束,应该调用哪些函数. 但是,在回调函数方面,jquery的功能非常弱.为了改变这一点,jquery开发团队就设计了deferred对象. 简单说,deferred对象就是jquery的回调函数解决方案. 在英语中,defer的意思是＂延迟＂,所以deferred对象的含义就是＂延迟＂到未来某个点再执行.

太平区18247705993： 怎么调用jquery 里面的$函数 - ？
右宝分清： 调用jquery 里面的$函数:$.ajax()是jQuery最底层的方法,因为,凡使用$.getScript(),$.get(),$.post(),$.getJSON()的调用,都可以用$.ajax()代替. $.ajaxSetup()设置全局Ajax 在使用$.ajax()方法时,有时需要调用多个$.ajax(),如果每个方法都设置其中的请求细节,显得繁琐.使用$.ajaxSetup()方法设置全局性的Ajax默认选项,一次设置,全局有效.

太平区18247705993： jquery中的“$”是什么意思? - ？
右宝分清： $就是jquery对象.它作为一个控制符,可以控制get方法.$ 是 JQuery 常用的一个回传函数,定义为 ＂选取＂ 英文是 selector 的缩写.jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作、事件处理、动画设计和Ajax交互.

太平区18247705993： jquery $和#的具体用法 - ？
右宝分清： $是用户jquery中选取的 #是表示id 比如说 html: <input type=＂text＂ id=＂nav＂> //定义一个id=nav的文本框 jquery: $(function(){ //固定步骤$(＂#nav＂).focus(function(){ //$就是调用jquery,(＂＂)就是选取里面的东西,$(＂#nav＂)就是直接选取id=nav的元素$(this).css(＂border-color＂,＂#f00＂); //$(this)就是之前选取的元素,然后用css改变边框的颜色,变为红色}); });

太平区18247705993： jquery中的$是什么意思 - ？
右宝分清： 是 JQuery 常用的一个回传函数,定义为 ＂选取＂ 英文是 selector 的缩写 例子︰ $.function(); 就是 选取 JQuery 定义的 function() 执行 $('input') 就是 选取 HTML 当中全部的 input 标签 $('#abc') 就是 选取 HTML 当中 ID 名称为 abc 的物

太平区18247705993： jquery 中$符号的作用,还有$(function(){ })如何理解? - ？
右宝分清： $选择符,jquery自己的定义,$(function(){ })是定义一个匿名函数$(document).ready(function(){});的简写

太平区18247705993： jquery中的$什么意思 - ？
右宝分清： $就是相当于一个jquery的成员变量.你可以替换他, jquery(function($) {//这样你使用$就不会有冲突啦、 }

太平区18247705993： jquery代码作用解释 - ？
右宝分清： 1. Deffered的作用: 在没有这个对象之前,想要将异步的操作变为同步的,只能使用回调函数.这样的话代码的可维护性可读性会大大降低.2. $.Deferred().resolve()是标记当前函数执行结束,$.when(defer1,defer2).then(funcCallback)表示当前的funcCallback要等defer1,defer2执行结束(即每个deffered对象都用resolve标记)之后再执行,跟defer1和defer2谁先执行谁后执行没有关系.3. 用法:$.Mutex.exec(defer1,defer1); 作用:使用Mutex使defer1,defer2只执行一次,相当于单例