jQuery.when.xml

<?xml version="1.0"?>
<entry type="method" name="jQuery.when" return="Promise">
  <title>jQuery.when()</title>
  <signature>
    <added>1.5</added>
    <argument name="deferreds" type="Deferred">
      <desc>Zero or more Deferred objects, or plain JavaScript objects.</desc>
    </argument>
  </signature>
  <desc>Provides a way to execute callback functions based on zero or more objects, usually <a href="/category/deferred-object/">Deferred</a> objects that represent asynchronous events.</desc>
  <longdesc>
    <p>If no arguments are passed to <code>jQuery.when()</code>, it will return a resolved Promise.</p>
    <p>If a single Deferred is passed to <code>jQuery.when()</code>, its Promise object (a subset of the Deferred methods) is returned by the method. Additional methods of the Promise object can be called to attach callbacks, such as <a href="/deferred.then/"><code>deferred.then</code></a>. When the Deferred is resolved or rejected, usually by the code that created the Deferred originally, the appropriate callbacks will be called. For example, the jqXHR object returned by <code>jQuery.ajax()</code> is a Promise-compatible object and can be used this way:</p>
    <pre><code>
$.when( $.ajax( "test.aspx" ), $.ajax( "page.aspx" ) ).then(function( res1, res2 ) {
  alert( res1[2].status ); // Alerts 200
})
.fail(function( err1, err2 ) {
  alert( err1.status );
});
    </code></pre>
    <p>In the previous example, <code>res1</code> and <code>res2</code> are arrays containing three values: <code>data</code>, <code>textStatus</code>, and <code>jqXHR</code>. It is adviced to always provide a callback to handle errors through the use of <code>deferred.fail()</code> or the second parameter of <code>deferred.then()</code>.</p>
    <p>When a single <a href="/Types/#Deferred">Deferred</a>, <a href="/Types/#Promise">Promise</a>, or Promise-compatible object is passed to <code>jQuery.when()</code>, an argument for each of the returned value is provided to the <code>doneCallback</code> instead of a single argument containing an array of values. It is suggested not to rely on this behavior because it is considered an anti-pattern and it will change in the upcoming versions of jQuery, starting with version 3.</p>
    <p>If a single argument is passed to <code>jQuery.when()</code> and it is not a Deferred or a Promise, it will be treated as a resolved Deferred and any doneCallbacks attached will be executed immediately. The doneCallbacks are passed the original argument. In this case any failCallbacks you might set are never called since the Deferred is never rejected. For example:</p>
    <pre><code>
$.when( { testing: 123 } ).done(function( x ) {
  alert( x.testing ); // Alerts "123"
});
    </code></pre>
    <p>If you don't pass it any arguments at all, <code>jQuery.when()</code> will return a resolved promise.</p>
    <pre><code>
$.when().then(function( x ) {
  alert( "I fired immediately" );
});
    </code></pre>
    <p>In the case where multiple Deferred objects are passed to <code>jQuery.when()</code>, the method returns the Promise from a new "master" Deferred object that tracks the aggregate state of all the Deferreds it has been passed. The method will resolve its master Deferred as soon as all the Deferreds resolve, or reject the master Deferred as soon as one of the Deferreds is rejected. If the master Deferred is resolved, the doneCallbacks for the master Deferred are executed. The arguments passed to the doneCallbacks provide the resolved values for each of the Deferreds, and matches the order the Deferreds were passed to <code>jQuery.when()</code>. For example:</p>
    <pre><code>
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" );
    </code></pre>
    <p>In the event a Deferred was resolved with no value, the corresponding doneCallback argument will be undefined. If a Deferred resolved to a single value, the corresponding argument will hold that value. In the case where a Deferred resolved to multiple values, the corresponding argument will be an array of those values. For example:</p>
    <pre><code>
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 );
    </code></pre>
    <p>In the multiple-Deferreds case where one of the Deferreds is rejected, <code>jQuery.when()</code> immediately fires the failCallbacks for its master Deferred. Note that some of the Deferreds may still be unresolved at that point. The arguments passed to the failCallbacks match the signature of the failCallback for the Deferred that was rejected. If you need to perform additional processing for this case, such as canceling any unfinished Ajax requests, you can keep references to the underlying jqXHR objects in a closure and inspect/cancel them in the failCallback.</p>
  </longdesc>
  <example>
    <desc>Execute a function after two Ajax requests are successful. (See the jQuery.ajax() documentation for a complete description of success and error cases for an ajax request).</desc>
    <code><![CDATA[
$.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!" );
  }
});
]]></code>
  </example>
  <example>
    <desc>Execute the function <code>myFunc</code> when both ajax requests are successful, or <code>myFailure</code> if either one has an error.</desc>
    <code><![CDATA[
$.when( $.ajax( "/page1.php" ), $.ajax( "/page2.php" ) )
  .then( myFunc, myFailure );
]]></code>
  </example>
  <category slug="core"/>
  <category slug="deferred-object"/>
  <category slug="version/1.5"/>
</entry>