jQuery的promise与deferred对象在异步回调中的作用

本文旨在介绍 jQuery 中的 promise 与 deferred 对象在异步回调中的重要作用。对于前端开发者来说，理解这两个概念将有助于更优雅地处理异步行为，让代码更加简洁易懂。

一、前言

为了拯救前端开发者于回调地狱，jQuery 引入了 Promise 的概念。Promise 是一种使异步代码行为更加优雅的抽象。从 jQuery 1.5 版本开始，它实现了 CommonJS Promise/A 规范，但并未完全遵循规范，因此在 API 上存在一些差异。接下来，我们将深入它们的特性和用法。

二、示例

在早期的 jQuery 动画中，我们通常会使用嵌套的回调函数来执行一系列操作。这种方式不仅代码冗长，而且不易于理解。现在，让我们看看如何使用 jQuery 提供的 promise 和 deferred 对象来简化这种情况。

以前，我们可能会这样写动画代码：

```javascript

$('.animateEle').animate({

opacity: '.5'

}, 0, function() {

$('.animateEle2').animate({

width: '100px'

}, 2000, function() {

$('.animateEle3').animate({

height: '0'

}, 2000);

});

});

```

```javascript

var animate1 = function() {

return $('.animateEle1').animate({opacity: '.5'}, 0).promise();

};

var animate2 = function() {

return $('.animateEle2').animate({width: '100px'}, 2000).promise();

};

var animate3 = function() {

return $('.animateEle3').animate({height: '0'}, 2000).promise();

};

// 通过 $.when 和 .then 连接动画，实现顺序执行

$.when(animate1()).then(animate2).then(animate3);

```

三、深入理解 promise 和 deferred 对象方法

Promise 对象实际上是 deferred 对象的特例，因为 promise 对象不能更改异步状态，而 deferred 对象可以。在方法设计上，这两者有着明显的区别。

1. Promise 对象方法：通常，对于 DOM 操作、动画和 Ajax 相关的方法，我们都可以使用 promise 方法。调用 promise 方法会返回一个 promise 对象，可以链式调用 promise 方法。Promise 对象常见的方法有 done、fail 和 then。

（1）DOM 使用 promise 方法示例：

```javascript

var box = $('box');

box.promise().done(function(ele) {

console.log(ele); // jQuery box

});

```

（2）Ajax 使用 promise 方法示例（默认返回一个 promise 对象，因此可以不必显式调用 promise 方法）：

```javascript

$.post('/', {}).done(function(data) {

console.log('请求成功');

}).fail(function() {

console.log('请求错误');

});

```

动画的示例已在上面给出，这里不再重复。通过深入理解 jQuery 中的 promise 和 deferred 对象，我们可以更轻松地处理异步操作，使代码更加简洁、清晰。希望本文能帮助您更好地理解这两个概念，并在实际开发中应用它们。关于Deferred对象和Promise的

Deferred对象和Promise都是处理异步操作的重要工具，它们之间有着紧密的联系。为了更好地理解它们之间的差异和应用，让我们深入一下。

Promise是一个由异步函数返回的对象，代表了一个最终可能完成（成功解决）或失败（被拒绝）的操作及其结果。Promise对象本身没有resolve和reject方法，因为当你将Promise传递给其他脚本时，你不希望它自行解决或拒绝。这是Promise的基本特性，保证了异步操作的独立性和完整性。

而Deferred对象则提供了更多的操作可能性。它具有resolve和reject方法，可以处理成功的结果并触发与done()相关的函数，或者处理失败的结果并触发与fail()相关的函数。还有一个notify方法，可以在异步处理过程中触发progress回调，用于处理如进度条等需要实时更新的场景。

让我们通过一个简单的例子来说明deferred对象的使用。假设我们正在优化狼蚁网站的SEO，其中有一段代码使用到了deferred对象。这段代码中的wait函数返回了一个promise，它在2秒后解决。除了setTimeout之外，所有异步操作都可以这样使用，如动画、Web worker等。在这个例子中，我们使用了deferred对象，并在wait函数中返回了一个promise对象。

关于deferred对象的常用方法，有resolve、reject和notify，它们分别对应done、fail和progress方法。当deferred对象的状态发生变化时（如成功解决、被拒绝或通知），相应的方法会被触发。这是一个非常有用的特性，使得我们可以灵活地处理异步操作的各种情况。

需要注意的是，虽然deferred对象提供了很多功能，但我们在使用时应该避免滥用。特别是，我们不应该在返回的promise上调用resolve、reject等方法，因为这会导致错误。因为像wait(2500)这样的函数调用返回的是promise对象，而不是deferred对象，所以它没有resolve和reject等方法。

沉浸在Deferred对象的优雅世界，领略Promise的魅力

在我们的编程旅程中，我们经常需要将异步操作串联起来，以实现流畅的异步流程。这其中，Deferred对象和Promise对象起到了至关重要的作用。将Deferred对象放在wait函数中作为局部变量，不仅能避免全局污染，还能通过Promise方法将其转化为Promise对象，从而避免外部状态更改对函数的影响。

让我们通过一个简单的例子来深入理解这一过程。假设我们有一个名为wait的函数，它接受一个参数ms，并返回一个Deferred对象。通过setTimeout函数，我们可以在指定的时间后（resolve）这个Deferred对象。如果我们尝试在外部更改这个Deferred对象的状态，那么必然会触发该对象的fail回调函数。无论Deferred对象是还是拒绝，always方法都会触发其回调。

当我们谈及共性时，不得不提的是then和$.when这两个方法。它们不仅适用于Deferred对象，同样也适用于Promise对象。$.when方法可以接受多个Deferred对象或纯JavaScript对象，并返回一个Promise对象。而then方法则接受三个回调，分别在Deferred对象、拒绝和通知时触发。值得注意的是，为了使得异步事件按照预期顺序执行，我们必须传入一个返回Promise对象的函数。

让我们回顾一下最初的动画示例代码。在$.when(animate1()).then(animate2).then(animate3)这段代码中，我们首先调用animate1函数并将结果（一个Promise对象）传递给$.when方法。接着在then方法中，我们传入一个变量名作为参数，这个函数返回一个新的Promise对象。这正是我们所需要的，因为它确保了异步事件的顺序执行。如果我们改变执行语句为$.when(animate1()).then(animate2()).then(animate3())或者$.when(animate1(),animate2(),animate3())的话，那么三个动画就会同步执行。

与then方法类似的done、fail和progress方法也有相同的要求。它们都需要传入一个返回Promise对象的函数作为参数。这样，我们就可以确保在异步操作完成时按照预期的方式处理结果。通过这种方式，我们可以充分利用Deferred和Promise对象的强大功能，实现优雅、流畅的异步编程。我们调用cambrian.render('body')来结束我们的程序旅程。