jQuery.Callbacks()Method
jQuery Miscellaneous Methods
Examples
Add a callback function to the $.Callbacks list
$(function () {
function fn1( value ) {
alert( value );
}
function fn2( value ) {
fn1("fn2 says: " + value);
return false;
}
var callbacks = $.Callbacks();
callbacks.add( fn1 );
callbacks.fire( "foo!" );
callbacks.add( fn2 );
callbacks.fire( "bar!" );
})
Try it Yourself »
Definition and Usage
$.Callbacks() refers to a multi-purpose callback function list object that provides a powerful way to manage callback function queues.
Tip:$.Callbacks is used internally in jQuery, such as functions that provide basic functionality for components like .ajax, $.Deferred, etc. It can also be used in some components with similar functionality, such as self-developed plugins.
Syntax
| Parameters |
Description |
|
flags
|
Optional. String type. An optional list separated by spaces to change the behavior of the callback list. |
More Examples
Below is an example of using .remove() to delete a specific callback from the callback list.
Example
$(function () {
function fn1( value ) {
alert( value );
}
function fn2( value ) {
fn1("fn2 says: " + value);
return false;
}
var callbacks = $.Callbacks();
callbacks.add( fn1 );
callbacks.fire( "foo!" );
callbacks.add( fn2 );
callbacks.fire( "bar!" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
})
Try it Yourself »
Supported Flags Parameters
This flags parameter is an optional parameter of $.Callbacks(). It is structured as an optional list of flags separated by spaces to change the behavior of the callback list (e.g. $.Callbacks( 'unique stopOnFalse' )).
The following flags are available:
| Parameters |
Description |
|
once
|
Ensure this callback list is executed only once. |
|
memory
|
Cache the parameter values from the last fire. When add() adds a callback function, immediately call the newly added callback function with the last parameter values. |
unique
|
A callback can only be added once and will not be added repeatedly. |
stopOnFalse
|
After a callback function returns false, interrupt the subsequent callback functions. |
Below is an example of $.Callbacks( "once" ).
Example
$(function () {
function fn1( value ) {
alert( value );
}
function fn2( value ) {
fn1("fn2 says: " + value);
return false;
}
var callbacks = $.Callbacks( "once" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
})
Try it Yourself »
Below is an example of $.Callbacks( "memory" ).
Example
$(function () {
function fn1( value ) {
alert( value );
}
function fn2( value ) {
fn1("fn2 says: " + value);
return false;
}
var callbacks = $.Callbacks( "memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
})
Try it Yourself »
Below is an example of $.Callbacks( "unique" ).
Example
$(function () {
function fn1( value ) {
alert( value );
}
function fn2( value ) {
fn1("fn2 says: " + value);
return false;
}
var callbacks = $.Callbacks( "unique" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
})
Try it Yourself »
Below is an example of $.Callbacks( "stopOnFalse" ).
Example
$(function () {
function fn1( value ) {
alert( value );
return false;
}
function fn2( value ) {
fn1( "fn2 says: " + value );
return false;
}
var callbacks = $.Callbacks( "stopOnFalse" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
})
Try it Yourself »
$.Callbacks() supports setting multiple flags (identifiers) in a list rather than just one, and has a cumulative effect, similar to "&&".
Below is an example of $.Callbacks( 'unique memory' ).
Example
$(function () {
function fn1( value ) {
alert( value );
return false;
}
function fn2( value ) {
fn1( "fn2 says: " + value );
return false;
}
var callbacks = $.Callbacks( "unique memory" );
callbacks.add( fn1 );
callbacks.fire( "foo" );
callbacks.add( fn1 );
callbacks.add( fn2 );
callbacks.fire( "bar" );
callbacks.add( fn2 );
callbacks.fire( "baz" );
callbacks.remove( fn2 );
callbacks.fire( "foobar" );
})
Try it Yourself »
The $.Callbacks method can also be separated, for example:
Example
$(function () {
function fn1( value ) {
alert( value );
}
var callbacks = $.Callbacks(),
add = callbacks.add,
remove = callbacks.remove,
fire = callbacks.fire;
add( fn1 );
fire( "hello world" );
remove( fn1 );
})
Try it Yourself »
$.Callbacks, $.Deferred and Pub/Sub
The general idea behind pub/sub (observer pattern) is to promote loose coupling and efficient communication in applications. Observers, also called subscribers, point to the observed subject. The Publisher notifies subscribers when an event occurs.
As a demonstration of the components created by $.Callbacks(), you can implement a Pub/Sub system using only the callback function list. Using $.Callbacks as a topic queue, you can publish and subscribe to topics as follows:
Example
$(function () {
function fn1( value ) {
alert( value );
return false;
}
function fn2( value ) {
fn1( "fn2 says: " + value );
return false;
}
var topics = {};
jQuery.Topic = function( id ) {
var callbacks,
method,
topic = id && topics[ id ];
if ( !topic ) {
callbacks = jQuery.Callbacks();
topic = {
publish: callbacks.fire,
subscribe: callbacks.add,
unsubscribe: callbacks.remove
};
if ( id ) {
topics[ id ] = topic;
}
}
return topic;
};
$.Topic( "mailArrived" ).subscribe( fn1 );
$.Topic( "mailArrived" ).subscribe( fn2 );
$.Topic( "mailSent" ).subscribe( fn1 );
$.Topic( "mailArrived" ).publish( "hello world!" );
$.Topic( "mailSent" ).publish( "woo! mail!" );
})
Try it Yourself »
A further improvement using $.Deferreds can ensure that the publisher only publishes notifications to subscribers when a specific task is completed (or resolved). See the example code below:
Example
$(function () {
function fn1( value ) {
alert( value );
return false;
}
function fn2( value ) {
fn1( "fn2 says: " + value );
return false;
}
var topics = {};
jQuery.Topic = function( id ) {
var callbacks,
method,
topic = id && topics[ id ];
if ( !topic ) {
callbacks = jQuery.Callbacks();
topic = {
publish: callbacks.fire,
subscribe: callbacks.add,
unsubscribe: callbacks.remove
};
if ( id ) {
topics[ id ] = topic;
}
}
return topic;
};
$.Topic( "mailArrived" ).subscribe( fn1 );
var dfd = $.Deferred();
var topic = $.Topic( "mailArrived" );
dfd.done( topic.publish );
dfd.resolve( "Already published!" );
})
Try it Yourself »
jQuery Miscellaneous Methods
Other Extensions