jQuery的promise与deferred对象在异步回调中的作用(jquery propertychange)

推荐整理分享jQuery的promise与deferred对象在异步回调中的作用(jquery propertychange)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:jquery prototype,jquery中prepend,jquery中prepend,jquery prompt,jquery prompt,jquery propertychange,jquery promise的用法,jquery中的prop,内容如对您有帮助，希望把文章链接给更多的朋友！

一、前言

为了让前端们从回调的地狱中回到天堂， jQuery 也引入了 Promise 的概念。 Promise 是一种令代码异步行为更加优雅的抽象，有了它，我们就可以像写同步代码一样去写异步代码。 jQuery 从1.5版本开始实现了 CommonJS Promise/A 规范这一重量级方案，不过没有严格按照规范进行实现，有一些API上的差异。

好，让我们来看看他们的特性吧（ 本文示例基于jquery 1.8版本以上 ）。

二、示例

以前写动画时，我们通常是这么干的：

假如这么使用回调的话，那就太伤了。幸好，还有一些现成的 Promise 解决方案来优雅地解决这种问题。

我们看看 jQuery 提供的解决办法。

很明显，更改后的代码更易懂易读了。

但是，上面的代码，有些细节的东西并没有透露，一不小心，就容易出错，得不到我们想要的顺序完成动画的效果。下面让我们来全面理解 jQuery 提供的 promise 和 deferred 对象的方法，看看到底如何使用。

三、promise和deffered对象方法

promise 对象其实就是 deferred 对象的特例，因为 promise 对象不能更改异步状态，而 deferred 对象可以。这点在他们的方法设计上，有着明显的体现。

1.promise对象方法

通常，对于DOM，动画，ajax相关方法，我们都可以使用 promise 方法。调用 promise 方法，返回的是 promise 对象。可以链式调用 promise 方法。

promise对象常见的方法有三个 ： done ， fail ， then 。

其它的方法就不要去记了， jquery 这里的接口方法太多了，在我看来挺??碌模?透?缙诘氖录?椒ò蠖ㄒ谎? live ， delegate ， bind ，最终不是都归为 on 来管了么。

代码示例，如下：

（1）DOM使用 promise 方法：

（2）Ajax使用 promise 方法(默认返回一个 promise 对象，所以可以不必显式调用 promise 方法)：

动画示例已有，就不重复列出了。

2.deferred对象方法

那么Deferred和Promise之间有什么区别呢？正如你在前面看到的，一个promise就是一个由异步函数返回的对象。当你想要自己编写一个这样的函数时你需要使用一个deferred。

一个deferred对象能做的和一个promise对象差不多，但是它有两个函数来触发done()和fail()函数。

一个deferred对象拥有一个resolve()函数来处理一个成功的结果并执行与done()相关的函数。reject()函数则用来处理失败的结果并执行与fail()相关的函数。

你可以给resolve()和reject()函数都提供参数，然后它们都将传递给与done()和fail()相关的回调函数。

promise对象没有resolve()和reject()函数。这是因为你将promise放到了其他的脚本中并且你也不想promise去resolve或者reject一个promise。

下面是一个关于deferred的简单例子。html仅仅是一个简单的拥有id属性为”result”的空div。

其中，wait()函数返回了一个promise。它将在2s之后被解析。除了setTimeout之外，异步函数中所有的东西都能这样使用，比如 动画，Web worker等等。wait()函数中的代码应该很清晰，我们使用了deferred对象，但是我们返回了一个限制的promise对象。

对于 deferred 对象呢，也就是使用 $.Deferred() 方法，以及 $.when() 等方法创造出来的对象，有如下的常用方法：

另外还有 promise 、 then 和 always 方法。

之所以这么排版，是因为他们是对应的，也就是说： resolve 方法会触发 done 的回调执行， reject 会触发 fail 的回调， notify 会触发 progress 的回调。

直接看代码：

我们看到了，上面的代码中，在 wait 函数中，返回的是个 promise 对象，而不是 deferred 对象。

要知道， promise 对象是没有 resolve , reject , notify 等方法的，也就意味着，你无法针对 promise 对象进行状态更改，只能在 done 或 fail 中进行回调配置。所以，你如果这么调用 wait().resolve() 将会报错，因为 wait() 返回的是个 promise 对象，不存在 resolve 方法。

但是，这么做，有个好处，我们把 dtd 这个 deferred 对象放在了 wai t函数中，作为了局部变量，避免了全局的污染；进一步通过 promise 方法，转化 dtd 这个 deferred 对象为 promise 对象，避免了函数 wait 外部可能发生的状态更改（假如我们确实有这个需求）。

比如：

我们在外部更改了 wait 返回的 deferred 对象的状态，这样必然触发该对象的 fail 回调函数。

对于 always 方法，从字面意思上就很容易理解， deferred 对象无论是 resolve 还是 reject ，都会触发该方法的回调。

3.其它共性

此处讲讲 then 和 $.when 方法的使用。它们对 promise 对象也适用。

$.when 方法接受多个 deferred 对象或者纯javascript对象，返回 promise 对象。then 方法依次接受三个回调，分别为 deferred 对象 resolve , reject , notify 后触发的回调，返回一个 promise 对象。注意，必须传入函数，而该函数只有返回一个 promise 对象，才能够让异步事件按照预期顺序来执行。我们来看看最开始的动画示例代码， $.when(animate1()).then(animate2).then(animate3) ， $.when 方法中接受了一个 animate1 的函数执行结果，也就是得到了一个 promise 对象，而后的 then 中，则只是接受了一个变量名，这样得到的结果是一个匿名的函数体，而该函数中返回的是 promise 对象。正好符合了我们对 then 接受参数的要求。

假如我们把执行语句改成： $.when(animate1()).then(animate2()).then(animate3()) ，这样造成的结果就是三个动画同步执行了。与 $.when(animate1(),animate2(),animate3()) 无异。

既然 then 是如此要求，那么与 then 方法类似的 done , fail , progress 也是一样的。

详解JavaScript异步编程中jQuery的promise对象的作用 Promise,中文可以理解为愿望，代表单个操作完成的最终结果。一个Promise拥有三种状态：分别是unfulfilled(未满足的）、fulfilled（满足的）、failed（失败的

深入解析jQuery中Deferred的deferred.promise()方法 deferred.promise()和.promise()这两个API语法几乎一样，但是有着很大的差别。deferred.promise()是Deferred实例的一个方法，他返回一个Deferred.Promise实例。一个Deferre

jQuery中队列queue()函数的实例教程 如果当前jQuery对象匹配多个元素：获取队列时，只获取第一个匹配元素上的队列；设置队列(替换队列、追加函数)时，则为每个匹配元素都分别进行设置