deferred.then() JQ Home  <<  Objects  <<  deferred.then()

• <<    deferred.state()
• .promise()     >>

Handler code.

Description

The deferred.then() Deferred method, adds handlers to the Deferred object that are called on resolution, rejection or progression.

• The arguments passed to the deferred.then() method can be null if no callback of that type is required. You can also use the deferred.done(), deferred.fail() or deferred.progress() methods to set single callback types.
• Callbacks are executed in the order they were added and each callback is passed the args from the respective method if any were specified.
• Any doneCallbacks added after the Deferred object enters the resolved state are executed immediately when they are added, using the arguments that were passed to the deferred.resolve method.
• Any failCallbacks added after the Deferred object enters the rejected state are executed immediately when they are added, using the arguments that were passed to the deferred.reject method.
• Any progressCallbacks added after the Deferred object enters the resolved or rejected state are ignored.

From jQuery 1.8 this method has been revamped to replace the deprecateddeferred.pipe() method and should be used from this version onwards.

Syntax

Parameters

Return

A Promise object which is just a copy of a Deferred object without any notify/resolve/reject methods.

• A Promise object provides the following subset of methods of the Deferred object: deferred.then(), deferred.done(), deferred.fail(), deferred.always(), deferred.pipe() and deferred.progress() methods or determines the state through the deferred.state() method.

deferred.then( doneFilter [, failFilter ]
             [, progressFilter ] ) ExamplesObjects  <<  Top

Add handlers to the Deferred object that are called on resolution, rejection or progression.

In the example below when we press the left button the first time we create a Deferred object . We then notify and resolve the Deferred object and process any progressCallbacks and doneCallbacks.

When we press the right button the first time we create a Deferred object . We then notify and reject the Deferred object and process any progressCallbacks and failCallbacks.

$(function(){
  $('#btn13').one('click', function(){
    var ourDeferred = $.Deferred();
    ourDeferred.then( eFunc, gFunc, hFunc );
    ourDeferred.notify( 'Our deferred was notified. <br>', '#div1');
    ourDeferred.resolve( 'Our deferred was resolved. <br><br>', '#div1');
  });
  $('#btn14').one('click', function(){
    var ourDeferred = $.Deferred();
    ourDeferred.then( eFunc, gFunc, hFunc );
    ourDeferred.notify( 'Our deferred was notified. <br>', '#div1');
    ourDeferred.reject( 'Our deferred was rejected. <br><br>', '#div1');
  });

  function eFunc( value, div ){
    $(div).append( 'In eFunc: ' + value);
  }
  function gFunc( value, div ){
    $(div).append( 'In gFunc: ' + value);
  }
  function hFunc( value, div ){
    $(div).append( 'In hFunc: ' + value);
  }
});

In the example below when we press the left button the first time we create a Deferred object. We then use a then defer that will react to doneCallbacks from the original Deferred. We then resolve the original referred which calls back the then defer passing a message. We add to the message passed to the then deferred and output it below.

When we press the centre button the first time we create a Deferred object. We then use a then defer that will react to failCallbacks from the original Deferred. We then reject the original referred which calls back the then defer passing a message. We add to the message passed to the then deferred and output it below.

When we press the right button the first time we create a Deferred object. We then use a then defer that will react to doneCallbacks and progressCallbacks from the original Deferred. We then notify and resolve the original referred which calls back the then defer passing a message each time. We add to the messages passed to the then deferred and output it below.

$(function(){
  $('#btn28').one('click', function(){
    var ourDeferred = $.Deferred();
    thenDefer = ourDeferred.then( function ( value ) {
      return value + ' Returning from "thenDefer", so will be resolved. <br>';
    });
    ourDeferred.resolve( 'Resolving "ourDeferred". <br>' );
    thenDefer.done(function( value ) {
      aFunc( value, '#div2' );
    });
  });
  $('#btn29').one('click', function(){
    var ourDeferred = $.Deferred();
    thenDefer = ourDeferred.then( null, function ( value ) {
      return value + ' Returning from "thenDefer", so will be rejected. <br><br>';
    });
    ourDeferred.reject( 'Rejecting "ourDeferred". <br>' );
    thenDefer.fail(function( value ) {
   	  aFunc( value, '#div2' );
   	});
  });
  $('#btn30').one('click', function(){
    var ourDeferred = $.Deferred();
    thenDefer = ourDeferred.then( 
      function ( value ) {
        return value + ' Returning from "thenDefer", so will be resolved. <br><br>';
      },
      null, 
      function ( value ) {
        return value + ' Returning from "thenDefer", so will be notified. <br>';
      }
    );
    ourDeferred.notify( 'Notifying "ourDeferred". <br>' );
    ourDeferred.resolve( 'Resolving "ourDeferred". <br>' );
    thenDefer.progress( function( value ) {
      aFunc( value, '#div2' );
    });
    thenDefer.done( function( value ) {
      aFunc( value, '#div2' );
    });
  });
});

Related Tutorials

jQuery Advanced Tutorials - Lesson 7 - The Deferred Object

• <<    deferred.state()
• .promise()     >>