| # です返回值
deferred.pipe() 返回的是一个 * Promise对象*
示例&说明
过滤解决值:
var defer = $.Deferred(),
filtered = defer.pipe(function( value ) {//当延迟对象解决时被调用
// 传递给 pipe promise 回调函数的返回的值为10
return value * 2;
});
defer.resolve( 5 );//延迟对象被解决 调用pipe() return 10
filtered.done(function( value ) {//filtered 传递之前返回的值 10
alert( "值是(2*5 =) 10: " + value );//弹出框输出：值是(2*5 =) 10:10
});ログイン後にコピー
过滤拒绝值:
var defer = $.Deferred(),
//延迟得到解决时调用回调函数为null
//延迟得到拒绝的回调函数传递值value * 3 给Promise对象filtered 的fail的回调函数
filtered = defer.pipe( null, function( value ) {
return value * 3;
});
defer.reject( 6 );//延迟对象被拒绝 调用pipe() return 18
filtered.fail(function( value ) {
alert( "值是(3*6=)18:" + value );//弹出框输出：值是(3*6 =) 18:18
});ログイン後にコピー
链任务（？）：
var request = $.ajax( url, { dataType: "json" } ),
chained = request.pipe(function( data ) {
//request返回值给url2
return $.ajax( url2, { data: { user: data.userId } } );
});
chained.done(function( data ) {
// 通过第一个请求取回data值提供给URL2
});ログイン後にコピー
<span style="font-size: 18px;">deferred.then()</span>
deferred.then() 函数当Deferred（延迟）对象被解决/拒绝或仍在进行中时，调用添加处理程序。
注意：
- 如果没有这种类型的回调是需要的,参数可以为 null 。或者使用.done()，.fail()或者 .progress()设置只有一种未经过滤的状态或值的回调类型。
- 从jQuery 1.8开始, 方法返回一个新的 promise ，可以通过一个函数过滤延迟对象的状态和值，用来替换现在过时的deferred.pipe() 方法。
- 回调是依照他们被添加时的顺序执行的，由于 deferred.then 返回 Promise 对象，可以链接其它的 Promise 对象，包括附加的 .then() 方法。
doneFilter 和 failFilter函数过滤原延迟对象的解决/拒绝的状态和值。
progressFilter 函数过滤任何调用原有的延迟对象的notify 和 notifyWith的方法。
这些过滤器函数可以返回一个新的值传递给的 Promise 对象的.done() 或 .fail() 回调，或他们可以返回另一个观察的对象（延迟对象，Promise 对象等）传递给它的解决/拒绝的状态和值,Promise 对象的回调。
如果过滤函数是空，或没有指定，promise（承诺）将得到与原来值相同解决（resolved）或拒绝（rejected）。
语法
deferred.then( doneFilter [, failFilter ] [, progressFilter ] )
jQuery1.8新增该函数
deferred.then1.8-( doneCallbacks, failCallbacks)
jQuery1.5新增该函数,1.8移除
deferred.then1.8-( doneCallbacks, failCallbacks[, progressFilter ] )
jQuery1.7新增该函数,1.8移除
参数说明
| 参数 | 说明 |
|---|
| doneFilter | Function类型 可选 当Deferred（延迟）对象得到解决时被调用的一个函数 |
| failFilter | Function类型 可选 当Deferred（延迟）对象得到拒绝时被调用的一个函数 |
| progressFilter | Function类型 可选 当Deferred（延迟）对象生成进度通知时被调用的一个函数调用 |
| doneCallbacks | Function类型 当Deferred（延迟）对象得到解决时被调用的一个函数或函数数组 |
| failCallbacks | Function类型 当Deferred（延迟）对象得到拒绝时被调用的一个函数或函数数组 |
| progressCallbacks | Function类型 当Deferred（延迟）对象生成进度通知时被调用的一个函数或函数数组 |
返回值
deferred.then() 返回 Promise 对象
示例&说明
HTML代码：
<button>过滤解决值</button>
<p></p>
ログイン後にコピー
过滤解决值:
var filterResolve = function() {
var defer = $.Deferred(),
//当延迟对象解决时被调用
//过滤解决值给then()的返回Promise对象的完成回调函数
filtered = defer.then(function( value ) {
return value * 2;
});
defer.resolve( 5 );
//添加Promise对象的完成回调函数
filtered.done(function( value ) {
$( "p" ).html( "值是 ( 2*5 = ) 10: " + value );
});
};
$( "button" ).on( "click", filterResolve );ログイン後にコピー
过滤拒绝值:
var defer = $.Deferred(),
//延迟得到解决时调用回调函数为null
//延迟得到拒绝的，回调函数过滤拒绝值
//传递过滤的拒绝值 value * 3 给then()的返回Promise对象的拒绝回调函数fail
filtered = defer.then( null, function( value ) {
return value * 3;
});
defer.reject( 6 );//延迟对象被拒绝 调用then() return 18
//then()的返回Promise对象添加拒绝回调函数，并获取过滤的拒绝值
filtered.fail(function( value ) {
alert( "值是(3*6=)18:" + value );//弹出框输出：值是(3*6 =) 18:18
});ログイン後にコピー
链任务（？）：
var request = $.ajax( url, { dataType: "json" } ),
chained = request.then(function( data ) {
//request返回值给url2
return $.ajax( url2, { data: { user: data.userId } } );
});
chained.done(function( data ) {
// 通过第一个请求取回data值提供给URL2
});ログイン後にコピー
<span style="font-size: 18px;">deferred.catch()</span>
当Deferred对象被拒绝(reject)时，调用通过deferred.catch()添加的处理程序。
deferred.catch( fn ) 是 deferred.then( null, fn )的一个别名
语法
- deferred.catch( failCallbacks )
jQuery 3.0 新增该函数
参数说明
| 参数 | 说明 |
|---|
| failCallbacks | Function类型 一个函数，当 Deferred 对象被拒绝(reject)时被调用 |
返回值
deferred.catch() 返回的是一个 Promise 对象
示例&说明
jQuery.get 方法返回一个jqXHR对象， 它是从Deferred对象派生的，当Deferred对象被拒绝(reject) 时，我们可以使用.catch方法来处理，jQuery示例代码：
$.get( "test.php" )
.then( function() {
alert( "$.get succeeded" );
} )
.catch( function() {
alert( "$.get failed!" );
} );ログイン後にコピー
<span style="font-size: 18px;">deferred.promise()</span>
deferred.promise() 函数返回 Deferred(延迟)的 Promise 对象。
注意：
方法允许一个异步函数阻止那些干涉其内部请求的进度（progress）或状态（status）的其它代码。
Promise 对象只包含 deferred 对象的一组方法，包括：done(),then(),fail(),isResolved(), isRejected(), always(), 这些方法只能观察一个 deferred 的状态；不包括任何用于改变状态的延迟方法(resolve, reject, notify, resolveWith, rejectWith, 和 notifyWith)，因此Promise 对象无法更改 deferred 对象的内在状态
- deferred.promise()也可以接受一个 target 参数，此时传入的 target 将被赋予 Promise 的方法，并作为结果返回，而不是创建一个新对象（这个方法可以用于在已经存在的对象上绑定 Promise 行为的情况）。
语法
- deferred.promise( [target ] )
jQuery 1.5 新增该函数
参数说明
| 参数 | 说明 |
|---|
| target | Object类型 绑定 promise 方法的对象。 |
返回值
deferred.promise() 返回的是一个 Promise 对象
示例&说明
创建一个延迟对象，并设定两个延时时间是随机的定时器，分别用于受理（resolve）和拒绝（reject）延迟对象。无论哪一个先执行，都会调用其中一个回调函数。而另一个定时器则不会产生任何效果，因为在最先调用的那个定时器处理中，延迟对象已经处于完成状态(resolved 或 rejected 状态)。同时，还会设定一个定时器进度（progress）通知函数，用于进度通知处理，并在文档的 “body” 中显示 “working…”，以下为一次测试时的jQuery示例代码：
function asyncEvent(){
var dfd = new jQuery.Deferred();
var resolveValue=400+Math.random()*2000;
var resolveTime=Math.floor(resolveValue)
console.log("resolveTime"+resolveTime)//resolveTime：1890ms
// 在一个随机的时间间隔之后 Resolve （解决状态）
setTimeout(function(){
dfd.resolve("欢呼");
}, Math.floor(resolveTime));
var rejectValue=400+Math.random()*2000;
var rejectTime=Math.floor(rejectValue)
console.log("rejectTime"+rejectTime)//rejectTime：1364ms
// 在一个随机的时间间隔之后 reject （拒绝状态）
setTimeout(function(){
dfd.reject("对不起");
},rejectTime);
// 每半秒显示一个"working..."消息
setTimeout(function working(){
//"pending" : Deferred 对象是尚未完成状态
//0ms 执行一次 500ms执行一次 1000ms执行一次
//1364ms 执行 dfd.reject("对不起")
//传递拒绝值"对不起" 给拒绝过滤函数 alert( status+', 这次你失败了' );
if ( dfd.state() === "pending" ) {
//向正在执行的Deferred 对象的回调函数列表传递参数
dfd.notify("working... ");
setTimeout(working, 500);
}
}, 1);
// 返回 Promise 对象，调用者不能改变延迟对象
return dfd.promise();
}
// 为异步函数附加一个done, fail, 和 progress 处理程序
//如果向 jQuery.when 传入一个延迟对象，那么会返回它的 Promise 对象(延迟方法的一个子集)
$.when( asyncEvent() ).then(
function(status){
alert( status+', 事情进展顺利' );
},
function(status){
alert( status+', 这次你失败了' );
},
function(status){
$("body").append(status);
}
);ログイン後にコピー
使用目标参数,产生现有对象的Promise对象：
// 现有对象
var obj = {
hello: function( name ) {
alert( "Hello " + name );
}
},
// 创建一个延迟 Deferred
defer = $.Deferred();
// 设置对象作为 promise
defer.promise( obj );
// Resolve （解决） 该对象
defer.resolve( "John" );
// 使用该对象作为 Promise，向受理列表中添加回调函数
//延迟对象状态为解决，因此done 被调用
obj.done(function( name ) {
obj.hello( name ); //将弹出 "Hello John"
}).hello( "Karl" ); // 将弹出 "Hello Karl";ログイン後にコピー
<span style="font-size: 18px;">.promise()</span>
.promise() 函数返回一个 Promise 对象，观察某种类型被绑定到集合的所有行动，是否已被加入到队列中。
返回的 Promise 被链接到延迟对象上，保存在元素的 .data() 中。由于 .remove() 方法会移除元素上的 data，同时也会移除元素本身。所以，使用它会防止任何元素上未被受理的（unresolved） Promise 被受理（resolving）。如果有必要在元素的 Promise 被受理（resolved）之前，从 DOM 中移除该元素的话，请使用.detach() 来代替。之后再调用 .removeData()
注意：
- .promise() 方法返回一个动态生成的 Promise，当绑定到集合中的所有特定动作（action）已经被加入或未被加入到队列中时，生成的 Promise 将被受理（resolve）。
语法
- .promise( [type ] [, target ] )
jQuery 1.5新增
参数说明
| 参数 | 说明 |
|---|
| type | 可选/String类型 需要待观察队列类型。 |
| target | 可选/PlainObject类型 将要绑定 promise 方法的对象。 |
默认情况下， type的值是”fx” ，这意味着返回被受理（resolve）的 Promise 对象的时机，是在所有被选中元素的动画都完成时发生的。
如果提供target参数，.promise()在该参数上添加方法，然后返回这个对象，而不是创建一个新的。它适用于在一个已经存在的对象上添加 Promise 行为的情况。
返回值
.promise()方法返回一个动态生成的 Promise对象。
示例&说明
1.在一个没有激活动画的集合上调用 .promise()
相关的jQuery示例代码：
//在一个没有激活动画的集合上调用 .promise()，返回一个被受理（resolved）的 Promise
var div = $( "<div />" );
div.promise().done(function( arg1 ) {
//弹出 "true"
alert( this === div && arg1 === div );
});ログイン後にコピー
2.当所有的动画结果时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画），受理（Resolve）返回的 Promise，相关HTML代码 :
<style type="text/css">
//没有样式不易观察执行效果，因此添加样式设置
div{
height:100px;
width:200px;
border:2px solid #334455;
margin-top:2px;
}
</style>
<button>Go</button>
<p>准备...</p>
<div></div>
<div></div>
<div></div>
<div></div>ログイン後にコピー
当所有的动画结果时(包括那些在动画回调函数和之后添加的回调函数中初始化的动画），受理（Resolve）返回的 Promise，相关jQuery代码：
$( "button" ).on( "click", function() {
$( "p" ).append( "已开始..." );
$( "div" ).each(function( i ) {
$( this ).fadeIn().fadeOut( 100 * ( i + 51 ) );
});
$( "div" ).promise().done(function() {
$( "p" ).append( " 完成! " );
});
});
//效果显示好像是等动画执行完成后才执行done()方法ログイン後にコピー
使用 $.when() 语句(.promise() 方法使得在 jQuery 集合中实现它变成了可能)，受理（Resolve）返回的 Promise
var effect = function() {
return $("div").fadeIn(800).delay(1200).append(" fadeOut! ").fadeOut();
};
$("button").bind( "click", function() {
$("p").append( " 已开始... ");
$.when( effect() ).done(function() {
$("p").append(" 完成! ");
});
//效果显示好像是等动画执行完成后才执行done()方法
});ログイン後にコピー
【推荐学习：jQuery视频教程、web前端视频】
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
