JQuery .Deferred() 方法

在前端开发中，异步请求是必不可少的一部分。JQuery 提供了 .Deferred() 方法以及相关的方法链（.when() 和 .then()），方便我们处理异步请求，解决异步请求回调函数嵌套带来的不便。

什么是 .Deferred() 方法

.Deferred() 方法是 JQuery 提供的一个异步请求处理方法。该方法返回一个 Deferred 对象，可以在异步请求执行完成后，利用 Deferred 对象的方法（如 .resolve() 和 .reject()）来执行相应的回调函数，方便我们在代码中统一处理异步请求结果。

如何使用 .Deferred() 方法

以下为基本的使用方法：

var dfd = $.Deferred();

$.ajax({
    url: '/api/getData',
    success: function(data) {
        // 执行成功的回调函数
        dfd.resolve(data);
    },
    error: function() {
        // 执行失败的回调函数
        dfd.reject();
    }
});

dfd.promise().then(function(data) {
    // 成功后的回调函数
}, function() {
    // 失败后的回调函数
});

首先，利用 .Deferred() 方法创建一个 Deferred 对象，并将该对象存储在变量 dfd 中。

然后利用 $.ajax() 方法发送异步请求。在请求成功时，调用 dfd 的 .resovle() 方法，并将请求数据作为参数传入。在请求失败时，调用 dfd 的 .reject() 方法。

最后利用 .promise() 方法获取到 Deferred 对象的 Promise 对象，并使用 .then() 方法添加成功和失败的回调函数。

.when() 方法

使用 .when() 方法，我们可以一次性处理多个异步请求，只有当所有请求完成后，才执行相应的回调函数。

以下为 .when() 方法的基本使用方法：

$.when($.ajax('/api/getData1'), $.ajax('/api/getData2')).then(function(data1, data2) {
    // 请求均成功时的回调函数
}, function() {
    // 请求失败时的回调函数
});

在 .when() 方法中，我们可以传入多个异步请求对象（如 $.ajax() 方法返回的 Deferred 对象），当所有对象均执行成功时，执行第一个参数中的回调函数。如果有一个请求失败了，则执行第二个参数中的回调函数。同时，我们可以在回调函数中获取每个异步请求返回的数据，如 data1 和 data2。

当然，我们还可以在 .when() 方法中传入一个数组，来处理多个异步请求。

案例：图片预加载

以下简单地演示了如何使用 .Deferred() 方法完成图片预加载功能。

HTML 代码如下：

<div id="preload"></div>

JavaScript 代码如下：

var preloadImgs = [
    './img1.png',
    './img2.png',
    './img3.png'
];

var dfdArr = [];

$.each(preloadImgs, function(index, imgSrc) {
    var dfd = $.Deferred();
    var img = new Image();
    img.src = imgSrc;
    img.onload = function() {
        dfd.resolve();
    };
    img.onerror = function() {
        dfd.reject();
    };
    dfdArr.push(dfd);
});

$.when.apply($, dfdArr).then(function() {
    console.log('all images loaded!');
});

我们定义一个数组 preloadImgs，存储需要预加载的图片地址。

定义一个空数组 dfdArr，用来存储每张图片加载的 Deferred 对象。

使用 $.each() 方法遍历 preloadImgs 数组。对于每一个图片地址 imgSrc，创建一个新的 Deferred 对象，并存储在变量 dfd 中。

创建一个新的 Image 对象 img，并设置它的 src 属性为当前遍历到的图片地址。设置 img 对象的 onload 和 onerror 事件，在图片加载成功和失败时，分别调用 dfd 的 .resolve() 和 .reject() 方法。

将 dfd 对象存储在 dfdArr 数组中。

当所有图片加载完成后，$.when.apply($, dfdArr) 到 dfdArr 数组上，调用 .then() 方法，表明所有图片均已加载完成，可以执行相应的回调函数。

结语

本文简单介绍了 JQuery 的 .Deferred() 方法以及相关的方法链。使用 .Deferred() 方法，我们可以更加方便地处理异步请求，实现更加灵活的回调函数控制。当然，.Deferred() 方法的应用除了这些方面外，还有更多的用法，如利用 .pipe() 方法实现方法链的对象转换等。希望本文能对读者有所帮助。