jQuery.Callbacks() JQ Home  <<  Objects  <<  jQuery.Callbacks()

Callbacks object creation.

Shorthand version $.Callbacks()

Description

The jQuery.Callbacks() Constructor method, creates a callbacks list object for managing callback lists.

  • Internally the jQuery.Callbacks() function is used to provide the base functionality for the jQuery.ajax() method and the Deferred object.
  • The jQuery.Callbacks() method can be also be utilized in a similar way to define functionality for new components.
  • The default behaviour of a callbacks lists is the same as an event callback list and so the list can be 'fired' multiple times. This default behaviour can be modified using the optional 'flags' parameter when creating the list.

Syntax

Signature Description
jQuery.Callbacks( [flags] )A Callbacks Constructor for managing callback lists, optionally behavioured using flags.

Parameters

Parameter Description Type
flagsOptional list of space separated flags for changing the behaviour of the callback list.
  • once - This flag ensures the callback list can only be fired a maximum of one times, much like a Deferred.
  • memory - This flag keeps track of previously used values and will call any callback added after the list has been fired, immediately with the latest stored values.
  • stopOnFalse - This flag interrupts callings after a callback had returned a value of false.
  • unique - This flag ensures a callback can only be added to the list once to avoid duplication.
String

Return

A DOM element.

jQuery.Callbacks( [flags] ) ExamplesObjects  <<  Top

A Callbacks Constructor for managing callback lists.

In the example below when we press the button the first time we add the aFunc(value, div) and bFunc(value, div) functions to our callbacks list and fire them off.


$(function(){
  $('#btn1').one('click', function(){
    var ourCallbacks = $.Callbacks();
    ourCallbacks.add( aFunc );
    ourCallbacks.fire( 'The aFunc function was fired from our callbacks. <br>', '#div1');
    ourCallbacks.add( bFunc );
    ourCallbacks.fire( 'The bFunc function was fired from our callbacks. <br>', '#div1');
  });
  function aFunc( value, div ){
    $(div).append( value);
  }
  function bFunc( value, div ){
    aFunc('Passing bFunc function value to aFunc. <br>', div);
  }
});

div1. Some initial text.

Press the button below to action the above code:

A Callbacks list object for managing callback lists, behavioured using the once flag.

In the example below when we press the button the first time we add the aFunc(value, div) and bFunc(value, div) functions to our callbacks list and fire them off. Notice how only the aFunc(value, div) function is executed due to the use of the once flag.


$(function(){
  $('#btn2').one('click', function(){
    var ourCallbacks = $.Callbacks( 'once' );
    ourCallbacks.add( aFunc );
    ourCallbacks.fire( 'The aFunc function was fired from our callbacks. <br>', '#div2');
    ourCallbacks.add( bFunc );
    ourCallbacks.fire( 'The bFunc function was fired from our callbacks. <br>', '#div2');
  });
  function aFunc( value, div ){
    $(div).append( value);
  }
  function bFunc( value, div ){
    aFunc('Passing bFunc function value to aFunc. <br>', div);
  }
});

div2. Some initial text.

Press the button below to action the above code:

A Callbacks list object for managing callback lists, behavioured using the memory flag.

In the example below when we press the button the first time we add the aFunc(value, div) and bFunc(value, div) functions to our callbacks list and fire them off. We then remove the bFunc(value) function and fire the callbacks list again. The memory flag ensures the last function call was memorized and processes it accordingly.


$(function(){
  $('#btn3').one('click', function(){
    var ourCallbacks = $.Callbacks( 'memory' );
    ourCallbacks.add( aFunc );
    ourCallbacks.fire( 'The aFunc function was fired from our callbacks. <br>', '#div3');
    ourCallbacks.add( bFunc );
    ourCallbacks.fire( 'The bFunc function was fired from our callbacks. <br>', '#div3');
    ourCallbacks.remove( bFunc );
    ourCallbacks.fire( 'Memorized function called back. <br>', '#div3');
  });
  function aFunc( value, div ){
    $(div).append( value);
  }
  function bFunc( value, div ){
    aFunc('Passing bFunc function value to aFunc. <br>', div);
  }
});

div3. Some initial text.

Press the button below to action the above code:

A Callbacks list object for managing callback lists, behavioured using the stopOnFalse flag.

In the example below when we press the button the first time we add the cFunc(value, div) and dFunc(value, div) functions to our callbacks list and fire them off. Notice how the call to the cFunc(value, div) function from the dFunc(value, div) function never happens due to the stopOnFalse flag.


$(function(){
  $('#btn4').one('click', function(){
    var ourCallbacks = $.Callbacks( 'stopOnFalse' );
    ourCallbacks.add( cFunc );
    ourCallbacks.fire( 'The cFunc function was fired from our callbacks. <br>', '#div4');
    ourCallbacks.add( dFunc );
    ourCallbacks.fire( 'The dFunc function was fired from our callbacks. <br>', '#div4');
  });
  function cFunc( value, div ){
    $(div).append( value);
    return false;
  }
  function dFunc( value, div ){
    aFunc('Passing dFunc function value to cFunc. <br>', div);
    return false;
  }
});

div4. Some initial text.

Press the button below to action the above code:

A Callbacks list object for managing callback lists, behavioured using the unique flag.

In the example below when we press the button the first time we add the aFunc(value, div) and bFunc(value, div) functions to our callbacks list and fire them off. We add the aFunc(value) function again and fire the callbacks list again. The unique flag ensures this function is not placed on the callbacks list a second time.


$(function(){
  $('#btn5').one('click', function(){
    var ourCallbacks = $.Callbacks( 'unique' );
    ourCallbacks.add( aFunc );
    ourCallbacks.fire( 'The aFunc function was fired from our callbacks. <br>', '#div5');
    ourCallbacks.add( aFunc ); // Repeat entries not listed when using unique 
    ourCallbacks.add( bFunc );
    ourCallbacks.fire( 'The bFunc function was fired from our callbacks. <br>', '#div5');
  }
  function aFunc( value, div ){
    $(div).append( value);
  }
  function bFunc( value, div ){
    aFunc('Passing bFunc function value to aFunc. <br>', div);
  }
});

div5. Some initial text.

Press the button below to action the above code:

Related Tutorials

jQuery Advanced Tutorials - Lesson 6 - The Callbacks Object