jQuery.when()

jQuery

previous page next page

jQuery.when()

Categories: Core | Deferred Object

jQuery.when( deferreds ) Returns: Promise

Description: Provides a way to execute callback functions based on one or more objects, usually Deferred objects that represent asynchronous events.

  • version added: 1.5jQuery.when( deferreds )

    • deferreds
      Type: Deferred
      One or more Deferred objects, or plain JavaScript objects.

If a single Deferred is passed to jQuery.when, 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 deferred.then. 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 jQuery.ajax() is a Promise and can be used this way:

1
2
3
 
                                

                                  

                                    $.when( $.ajax("test.aspx") ).then(function(data, textStatus, jqXHR){
                                  

                                

                                

                                  

                                         alert( jqXHR.status ); // alerts 200
                                  

                                

                                

                                  

                                    });

If a single argument is passed to jQuery.when 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:

1
2
3
 
                                

                                  

                                    $.when( { testing: 123 } ).done(
                                  

                                

                                

                                  

                                        function(x) { alert(x.testing); } /* alerts "123" */
                                  

                                

                                

                                  

                                        );

In the case where multiple Deferred objects are passed to jQuery.when, 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, it is passed the resolved values of all the Deferreds that were passed to jQuery.when. For example, when the Deferreds are jQuery.ajax() requests, the arguments will be the jqXHR objects for the requests, in the order they were given in the argument list.

In the multiple-Deferreds case where one of the Deferreds is rejected, jQuery.when immediately fires the failCallbacks for its master Deferred. Note that some of the Deferreds may still be unresolved at that point. 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.

Examples:

Example: 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).

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 */
                                    

                                  

                                  

                                    

                                        var jqXHR = a1[2]; /* arguments are [ "success", statusText, jqXHR ] */
                                    

                                  

                                  

                                    

                                        if ( /Whip It/.test(jqXHR.responseText) ) {
                                    

                                  

                                  

                                    

                                          alert("First page has 'Whip It' somewhere.");
                                    

                                  

                                  

                                    

                                        }
                                    

                                  

                                  

                                    

                                      });

Example: Execute the function myFunc when both ajax requests are successful, or myFailure if either one has an error.

1
2
 
                                  

                                    

                                      $.when($.ajax("/page1.php"), $.ajax("/page2.php"))
                                    

                                  

                                  

                                    

                                        .then(myFunc, myFailure);
 POWERED BYHERONOTE
previous page start next page