jQuery.when()


jQuery.when( deferreds )返回值: Promise

描述: 提供了一种基于零个或多个 Thenable 对象执行回调函数的方法,通常是 Deferred 对象,代表异步事件。

如果未向 jQuery.when() 传递任何参数,它将返回一个已解析的 Promise。

如果向 jQuery.when() 传递单个 Deferred,则该方法将返回其 Promise 对象(Deferred 方法的子集)。可以调用 Promise 对象的其他方法来附加回调,例如 deferred.then。当 Deferred 被解析或拒绝时,通常由最初创建 Deferred 的代码完成,将调用相应的回调。例如,jQuery.ajax() 返回的 jqXHR 对象是一个 Promise 兼容对象,可以以这种方式使用。

1
2
3
$.when( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) {
alert( jqXHR.status ); // Alerts 200
});

如果向 jQuery.when() 传递单个参数,并且它不是 Deferred 或 Promise,它将被视为已解析的 Deferred,并且将立即执行任何附加的 doneCallbacks。doneCallbacks 将传递原始参数。在这种情况下,您可能设置的任何 failCallbacks 永远不会被调用,因为 Deferred 永远不会被拒绝。例如

1
2
3
$.when( { testing: 123 } ).done(function( x ) {
alert( x.testing ); // Alerts "123"
});

如果您根本不传递任何参数,jQuery.when() 将返回一个已解析的 Promise。

1
2
3
$.when().then(function( x ) {
alert( "I fired immediately" );
});

在向 jQuery.when() 传递多个 Deferred 对象的情况下,该方法将返回来自一个新的“主” Deferred 对象的 Promise,该对象跟踪传递给它的所有 Deferred 的聚合状态。该方法将在所有 Deferred 解析后解析其主 Deferred,或者在其中一个 Deferred 被拒绝后立即拒绝主 Deferred。如果主 Deferred 被解析,则将执行主 Deferred 的 doneCallbacks。传递给 doneCallbacks 的参数提供了每个 Deferred 的解析值,并且与向 jQuery.when() 传递 Deferred 的顺序匹配。例如

1
2
3
4
5
6
7
8
9
10
var d1 = $.Deferred();
var d2 = $.Deferred();
$.when( d1, d2 ).done(function ( v1, v2 ) {
console.log( v1 ); // "Fish"
console.log( v2 ); // "Pizza"
});
d1.resolve( "Fish" );
d2.resolve( "Pizza" );

如果 Deferred 在没有返回值的情况下被解析,相应的 doneCallback 参数将为 undefined。如果 Deferred 解析为单个值,相应的参数将保存该值。如果 Deferred 解析为多个值,相应的参数将是一个包含这些值的数组。例如

1
2
3
4
5
6
7
8
9
10
11
12
13
var d1 = $.Deferred();
var d2 = $.Deferred();
var d3 = $.Deferred();
$.when( d1, d2, d3 ).done(function ( v1, v2, v3 ) {
console.log( v1 ); // v1 is undefined
console.log( v2 ); // v2 is "abc"
console.log( v3 ); // v3 is an array [ 1, 2, 3, 4, 5 ]
});
d1.resolve();
d2.resolve( "abc" );
d3.resolve( 1, 2, 3, 4, 5 );

在多个 Deferred 的情况下,如果其中一个 Deferred 被拒绝,jQuery.when() 会立即触发其主 Deferred 的 failCallbacks。请注意,此时某些 Deferred 可能仍未解析。传递给 failCallbacks 的参数与被拒绝的 Deferred 的 failCallback 的签名匹配。如果您需要为此情况执行其他处理,例如取消任何未完成的 Ajax 请求,您可以在闭包中保留对底层 jqXHR 对象的引用,并在 failCallback 中检查/取消它们。

示例

在两个 Ajax 请求成功后执行一个函数。(有关 ajax 请求的成功和错误情况的完整描述,请参阅 jQuery.ajax() 文档)。

1
2
3
4
5
6
7
8
$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) ).done(function( a1, a2 ) {
// a1 and a2 are arguments resolved for the page1 and page2 ajax requests, respectively.
// Each argument is an array with the following structure: [ data, statusText, jqXHR ]
var data = a1[ 0 ] + a2[ 0 ]; // a1[ 0 ] = "Whip", a2[ 0 ] = " It"
if ( /Whip It/.test( data ) ) {
alert( "We got what we came for!" );
}
});

当两个 ajax 请求都成功时执行函数 myFunc,或者如果其中一个出现错误则执行 myFailure

1
2
$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
.then( myFunc, myFailure );