> For the complete documentation index, see [llms.txt](https://antonshevchuk.gitbook.io/jquery-for-beginners/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://antonshevchuk.gitbook.io/jquery-for-beginners/70_deferred_and_callbacks/callbacks.md). # Callbacks [Callbacks](https://api.jquery.com/jQuery.Callbacks/) is a really cool object. It lets you create lists of callback functions and gives you full control over them. It's simpler to work with than Deferred — there's no separation into positive and negative scenarios. Just a stack of functions that gets executed on the `fire()` command: ```javascript var C = $.Callbacks(); C.add(function(msg) { console.log(msg + " first") }); C.add(function(msg) { console.log(msg + " second") }); C.fire("Go"); ``` If you open the console and run the script above, you'll get something like this: ``` >>> Go first Go second ``` > — Where's the power, bro?\ > — In the arguments. By default, you can call the `fire()` method over and over again right from the console, and you'll get the same result every single time. But you can also define the Callbacks behavior through flags:
flagdescription
onceall functions will be called only once (similar to the Deferred object)
memorystores the value from the last fire() call and feeds it to newly registered callback functions, only then processes the new value (that's exactly how Deferred works)
uniquethe callback function list is filtered for uniqueness
stopOnFalseas soon as any function returns "false", the firing process stops
Probably better with examples, here's `once`: ```javascript var C = $.Callbacks("once"); C.add(function(msg) { console.log(msg + " first") }); C.add(function(msg) { console.log(msg + " second") }); C.fire("Go"); C.fire("Again"); // no result, only Go ``` ``` >>> Go first Go second ``` The `memory` flag is a bit trickier, pay attention: ```javascript var C = $.Callbacks("memory"); C.add(function(msg) { console.log(msg + " first") }); C.fire("Go"); C.add(function(msg) { console.log(msg + " second") }); C.fire("Again"); ``` ``` >>> Go first Go second // without the flag, this line wouldn't be here Again first Again second ``` The `unique` example is dead simple: ```javascript var C = $.Callbacks("unique"); var func = function(msg) { console.log(msg + " first") }; C.add(func); C.add(func); // this line won't affect the result C.fire("Go"); // only Go first ``` ``` >>> Go first ``` The `stopOnFalse` flag: ```javascript var C = $.Callbacks("stopOnFalse"); C.add(function(msg) { console.log(msg + " first"); return false; // there it is — the fateful false }); C.add(function(msg) { console.log(msg + " second"); }); C.fire("Go"); // only Go first ``` ``` >>> Go first ``` You can combine these flags and get interesting results, or you can skip that and just look at the following example. Here's the page to work with: {% embed url="" %} ```javascript // the car var $car = $('#car').show(); // our command stack var C = $.Callbacks(); ``` Add movement commands for the car in any order and quantity. To do this, run the scripts listed below (nothing will happen with the car until you call the `fire()` method): ```javascript C.add(function(speed) { $car.queue(function() { // turn down, add to queue with animation $(this).css("transform", "rotate(-90deg)").dequeue(); }); $car.animate({top:"+=800"}, speed); // drive down }); ``` ```javascript C.add(function(speed) { $car.queue(function() { // turn left, add to queue with animation $(this).css("transform", "rotate(0deg)").dequeue(); }); $car.animate({left:"-=400"}, speed); // drive left }); ``` ```javascript C.add(function(speed) { $car.queue(function() { // turn right, add to queue with animation $(this).css("transform", "rotate(180deg)").dequeue(); }); $car.animate({left:"+=400"}, speed); // drive right }); ``` ```javascript C.add(function(speed) { $car.queue(function() { // turn up, add to queue with animation $(this).css("transform", "rotate(90deg)").dequeue(); }); $car.animate({top:"-=400"}, speed); // drive up }); ``` Let's go! ```javascript // run the "program" // passing the movement speed as a parameter C.fire(400); ``` > A bit of history: the "Deferred" object branched off from the `$.ajax()` method as a result of jQuery 1.5 refactoring. Time passed, new versions of jQuery came out, and another round of refactoring happened — resulting in "Callbacks" being separated from "Deferred" in version 1.7. So in the current version of the library, the `$.ajax()` method works with the "Deferred" object, which is a layer on top of "Callbacks". To avoid confusion in terminology, I use the term "Deferred Callbacks" when working with "Callbacks" too, because there are many callbacks out there, and clarifying every time that I mean "that particular one" is quite tiresome. {% hint style="info" %} Here's an article on this topic that I recommend — [Async JS: The Power of $.Deferred](https://web.dev/articles/async-deferred) {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter: ``` GET https://antonshevchuk.gitbook.io/jquery-for-beginners/70_deferred_and_callbacks/callbacks.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.