When would I use JQuery.Callbacks?

Question

I was looking through new stuff added to jQuery 1.7 and I saw they now have jQuery.Callbacks() http://api.jquery.com/jQuery.Callbacks/.

The documentation shows you how to use jQuery.callbacks() but not any applicable examples of when I would want to use them.

It seems you can add/remove callbacks from a callbacks list and you can do jQuery.callbacks().fire(args), but this just fires off ALL of the callbacks in that list. Maybe I am missing something but this doesn't seem very useful.

In my head when I first saw this new functionality I thought you would be able to use it with key/value pairs. Which would then provide a simple way to manage callback functions in a single place in your application. Something like

$.callbacks.add("foo", myFunction); 

and then for example if I wanted to call that callback at the end of my function I could do something like

$.callbacks().fire("foo", args); 

However it doesn't look like you can fire off specific callbacks, you can only fire off all of them with the given arguments or none of them.

The closest thing I saw was being given the ability to give the .fire() function a context to set the "this" property

.fireWith(context, args) 

but this doesn't really help much either.

1. Am I misunderstanding the documentation?

2. If this is the desired functionality what are some applicable examples where this is useful.

Answer 1

To expand on @Rockets answer a bit and clear up some confusion:

The reason that one might need to use jQuery's $.Callbacks is multifaceted:

1. The user has a lot of code in one function and wants to split it up

2. They take that information and send it through the jQuery callback function which then allows them to have split their code into better manageable pieces with which to work with.
   So (for example) if you look at @Rocket's code:

   var clickCallbacks = $.Callbacks();  clickCallbacks.add(function() { //one one function piece     //parse and do something on the scope of `this`     var c = parseInt(this.text(), 10);     this.text(c + 1); }); clickCallbacks.add(function(id) { //add a second non-related function piece     //do something with the arguments that were passed     $('span', '#last').text(id); });  $('.click').click(function() {     var $ele = $(this).next('div').find('[id^="clickCount"]');     clickCallbacks.fireWith($ele, [this.id]); //do two separate but related things. }); 

3. What you can now have is multiple callback batches of function which you can now call whenever you deem it be necessary without the need to make so many changes throughout out your code.

Answer 2

I can see callbacks being useful when you are updating different DOM elements using the same method(s).

Here is a cheesy example: http://jsfiddle.net/UX5Ln/

var clickCallbacks = $.Callbacks();  clickCallbacks.add(function() {     var c = parseInt(this.text(), 10);     this.text(c + 1); }); clickCallbacks.add(function(id) {     $('span', '#last').text(id); });  $('.click').click(function() {     var $ele = $(this).next('div').find('[id^="clickCount"]');     clickCallbacks.fireWith($ele, [this.id]); }); 

It updates the click counter and the 'last clicked' when you click on something.