Wait for the first of multiple jQuery Deferreds to be resolved?

Question

With jQuery I know that I can use $.when() to wait for all of multipe Deferreds to be resolved. (Or for the first one to be rejected.)

But is there a simple way to fire of multiple Deferreds and then just wait for the first one to be resolved?

For instance I want to try to use two similar AJAX web services either or which might be down or slow and then process whichever one replies first. And then I might use a third Deferred for a timeout.

Answer 1

Based on Kevin B's code, here's an approach that uses a master Deferred object:

var masterDeferred = new $.Deferred(),
    reqOne = $.post("foo.php"),
    reqTwo = $.post("bar.php");

masterDeferred.done(function() {
    // do stuff
});

reqOne.done(function() {
    masterDeferred.resolve();
});
reqTwo.done(function() {
    masterDeferred.resolve();
});

I think I'm right in saying that the simplest form of resolving the masterDeferred would be :

reqOne.done(masterDeferred.resolve);
reqTwo.done(masterDeferred.resolve);

But separate done functions will allow you to branch internally and call .resolve(), .reject(), .resolveWith(...) or .rejectWith(...) as appropriate, together with masterDeferred callbacks of the general form :

masterDeferred.then( doneCallbacks, failCallbacks );

Answer 2

A quick and easy way would be to abort the other request when one of the two finishes, though you could also check the state of the deferred, the syntax of which will depend on your jQuery version which is why I go with abort for now.

function doStuff(data) {
    alert( "Hello World!" );
}
var reqOne = $.post("foo.php"),
reqTwo = $.post("bar.php");

reqOne.done(function(data){
    reqTwo.abort();
    finished = true;
    doStuff(data);
});
reqTwo.done(function(data){
    reqOne.abort();
    finished = true;
    doStuff(data);
});