jQuery之Deferred对象详解

什么是Deferred对象

Deferred对象是jQuery库提供的一个针对异步操作的解决方案。它可以把一个异步操作进行封装，方便进行后续的状态监听和操作处理，从而避免回调地狱的问题。

Deferred对象的状态

Deferred对象本身有三个状态，分别为：

• pending: 初始状态，即异步操作尚未完成；
• resolved: 异步操作成功完成；
• rejected: 异步操作完成失败。

Deferred对象的基本用法

jQuery.Deferred()用于创建一个Deferred对象，我们可以通过promise()方法得到一个承诺对象，来监听异步操作的完成情况。下面是一个示例：

var dfd = $.Deferred();
var promise = dfd.promise();

promise.done(function() {
   console.log('success');
}).fail(function() {
   console.log('fail');
}).always(function() {
   console.log('complete');
});

dfd.resolve(); // 手动调用resolve方法

在上面的示例中，我们首先使用$.Deferred()创建了一个Deferred对象dfd，然后通过dfd.promise()获取dfd的承诺对象，并在承诺对象上注册了done、fail、always三个方法，用于监听异步操作的状态变化。最后我们手动调用了dfd.resolve()方法，表示异步操作成功完成。运行上述代码结果如下：

success
complete

可以看到，在dfd对象被手动调用resolve方法时，承诺对象的done方法被触发，而always方法则会在done或fail方法完成后被触发。

Deferred对象的链式调用

利用Deferred对象的链式调用，可以很好地对异步操作进行分组。下面是一个利用Deferred对象完成的图片预加载的示例：

$.when($.ajax('/api/get-images'), $.ajax('/api/get-data'))
  .done(function(imgResult, dataResult) {
    // 图片、数据均加载完成
    // 待实现
  })
  .fail(function() {
    // 图片、数据均加载失败
    console.log('fail');
  });

在上面的示例中，通过调用$.when()方法来合并两个异步操作，并利用done()方法可以在两个操作都执行完成后进行回调处理。另外，利用fail()方法可以捕捉到异步操作执行失败的情况。

Deferred对象的终止

如果Deferred对象已经被完成或者失败了，就不能再次触发它们。为了区分完成和失败状态，我们可以从回调函数接受参数。

var dfd = $.Deferred();
var promise = dfd.promise();

promise.done(function(msg) {
   console.log(msg);
}).fail(function(msg) {
   console.log(msg);
});

dfd.resolve('success'); // 手动调用resolve方法

setTimeout(function(){
  dfd.reject('fail'); //手动调用reject方法
}, 1000)

在上面的示例中，我们还添加了一个setTimeout函数，用于延时一秒钟后手动调用reject方法。运行上述代码结果如下：

success
fail

可以看到，在dfd对象被手动调用resolve方法的同时，承诺对象的done方法被触发，而在延时一秒后，手动调用了reject方法，承诺对象的fail方法被触发。同时注意：我们在done和fail方法中添加了一个字符串参数，用于输出当前Deferred对象广播的状态。

小结

本篇文章主要讲解了jQuery之Deferred对象，包括Deferred对象的定义、状态、基本用法、链式调用和终止等相关内容。Deferred对象的灵活使用可以方便控制异步操作的执行状态，从而提高代码的可读性和维护性。