jquery defer怎么用

jQuery Deferred 对象是 jQuery 中的一个核心概念，它用于处理异步操作，Deferred 对象表示一个尚未完成但预计在未来完成的异步操作，它可以帮助我们更好地管理异步任务，AJAX 请求、事件处理等，本文将详细介绍如何使用 jQuery Deferred。

1、基本概念

在介绍 jQuery Deferred 的使用方法之前，我们先了解一下它的几个基本概念：

Promises（承诺）：一个 Promise 是一个具有两个状态的对象，即已完成（fulfilled）和未完成（pending），当一个异步操作完成时，Promise 的状态会从 pending 变为 fulfilled，或者从 pending 变为 rejected。

Deferred（延迟）：Deferred 对象表示一个尚未完成但预计在未来完成的异步操作，它有两个状态：已完成（resolved）和未完成（pending），当一个异步操作完成时，Deferred 的状态会从 pending 变为 resolved，或者从 pending 变为 rejected。

Promises/Deferred API（承诺/延迟 API）：Promises/Deferred API 提供了一套方法来处理 Promises 和 Deferred 对象，以便我们可以更好地管理异步任务。

2、Deferred 对象的创建

要创建一个 Deferred 对象，我们可以使用 $.Deferred() 构造函数。

var dfd = $.Deferred();

3、Deferred 对象的方法

jQuery Deferred 对象提供了以下方法来处理异步任务：

done(function): 当 Deferred 对象的状态从 resolved 变为 done 时，执行指定的回调函数。

dfd.done(function() {
    console.log('异步操作已完成');
});

fail(function): 当 Deferred 对象的状态从 rejected 变为 fail 时，执行指定的回调函数。

dfd.fail(function() {
    console.log('异步操作失败');
});

always(function): 无论 Deferred 对象的状态是从 resolved 还是 rejected 变为 done，都会执行指定的回调函数。

dfd.always(function() {
    console.log('异步操作已结束');
});

then(successCallback, errorCallback): Deferred 对象的状态从 resolved 变为 done，则执行 successCallback 回调函数；Deferred 对象的状态从 rejected 变为 done，则执行 errorCallback 回调函数。

dfd.then(function() {
    console.log('异步操作成功');
}, function() {
    console.log('异步操作失败');
});

4、Promises API（承诺 API）的使用

除了使用 Deferred 对象的方法之外，我们还可以使用 Promises API 来处理异步任务，Promises API 提供了以下方法：

promise(): 返回一个 Promise 对象。

var promise = dfd.promise();

resolve(value): 如果传入的值是一个 Promises/Deferred 对象，那么它将被原样返回；否则，返回一个新的 Promise 对象，其状态为 resolved，并将传入的值作为结果。

promise.resolve(1); // Promise {state: "resolved", value: 1}

reject(reason): 如果传入的值是一个 Promises/Deferred 对象，那么它将被原样返回；否则，返回一个新的 Promise 对象，其状态为 rejected，并将传入的值作为原因。

promise.reject(new Error('出错了')); // Promise {state: "rejected", reason: Error}

5、Deferred 对象的链式调用

我们可以使用链式调用的方式来处理多个异步任务。

$.ajax({url: 'test.txt', success: function() {
    console.log('请求成功');
}}).done(function() {
    console.log('请求完成后的操作');
}).fail(function() {
    console.log('请求失败后的操作');
});

6、Deferred 对象的链式调用示例（Promises API）

我们也可以使用 Promises API 来进行链式调用。

var promise = $.ajax({url: 'test.txt'}).promise();
promise.then(function() {
    console.log('请求成功');
}).then(function() {
    console.log('请求完成后的操作');}).catch(function() {
    console.log('请求失败后的操作');});