add()?callbacks.add() appends one or more functions to a jQuery Callbacks list (since jQuery 1.7). It queues handlers; they run when you call fire() or fireWith(). Returns the same Callbacks object for chaining.
callbacks.add( fn )
callbacks.add( fn1, fn2 ) // multiple args
callbacks.add( [fn1, fn2] ) // array of functions
add() → queue (does not run)
fire() → run every handler in order
returns the Callbacks object (chainable)| Need | Use |
|---|---|
| Register a handler | cbs.add(fn) |
| Run the list | cbs.fire(args…) |
| Unsubscribe | cbs.remove(fn) |
| Create the list | $.Callbacks([flags]) |
add()Create a list, register handlers, then fire when the event or step is ready.
$.Callbacks() (optional flags: once, memory, unique, stopOnFalse).add(fn) — or pass several functions / an array.fire() or fireWith(context, args) when you want handlers to run.remove() / empty() when a handler should no longer run.| Piece | Required? | Role |
|---|---|---|
| Callbacks object | Yes | From $.Callbacks() |
| callback / array | Yes | Function(s) to append |
| Return | — | Same Callbacks object (chainable) |
list = empty callback queue
add(fn or [fn…]):
if list is locked or disabled:
ignore
else if flag "unique" and fn already in list:
skip duplicate
else:
append fn to list
if flag "memory" and list already fired:
run fn now with last args
fire(args…):
for each fn in list (registration order):
call fn(args…)Keep these facts handy while wiring Callbacks lists.
| Topic | Detail |
|---|---|
| Syntax | callbacks.add(callbacks) |
| Argument | Function, multiple functions, or array of functions |
| Runs now? | No (unless memory + already fired) |
| Order | First added → first called (FIFO) |
| Duplicates | Allowed by default; use "unique" to block |
| Return | Same Callbacks object |
| Since | jQuery 1.7 |
Pick how to register handlers on a fresh $.Callbacks() list, then fire with "hello".
Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.
Create a list, register one handler, then fire.
var callbacks = $.Callbacks();
callbacks.add(function () {
console.log("First callback executed");
});
callbacks.fire();$.Callbacks() starts with an empty queue.add() stores the function — nothing prints yet.fire() walks the list and calls the handler.Pass several functions at once, or wrap them in an array — both append in order.
var callbacks = $.Callbacks();
function step1() { console.log("Step 1: validate"); }
function step2() { console.log("Step 2: save"); }
function step3() { console.log("Step 3: notify"); }
callbacks.add(step1, step2); // multiple args
callbacks.add([step3]); // array form (official API)
callbacks.fire();remove(step2).add(step1, step2) appends both in order.add([step3]) is the official Array overload.fire()On a default list, every fire() runs all handlers currently registered — including earlier ones.
var callbacks = $.Callbacks();
callbacks.add(function () {
console.log("First callback");
});
callbacks.fire();
// → First callback
callbacks.add(function () {
console.log("Second callback");
});
callbacks.fire();
// → First callback
// → Second callback$.Callbacks("once") or remove handlers you no longer want.fire()Every handler receives the same arguments you pass to fire().
var callbacks = $.Callbacks();
callbacks.add(function (name, score) {
console.log(name + " scored " + score);
});
callbacks.add(function (name, score) {
console.log("Log entry:", name, score);
});
callbacks.fire("Ada", 98);(name, score).fire("Ada", 98) forwards both args.this? Use fireWith(context, [args]).Let consumers add() extensions before your core code fire()s a lifecycle event.
var Gallery = (function () {
var onRender = $.Callbacks();
function render(items) {
console.log("Core render:", items.join(", "));
onRender.fire(items);
}
return {
onRender: onRender,
render: render
};
})();
Gallery.onRender.add(function (items) {
console.log("Analytics: rendered", items.length, "items");
});
Gallery.render(["photo1.jpg", "photo2.jpg"]);onRender is the public hook surface.onRender.add(...) registers analytics.fire(items) notifies hooks.Check these before relying on add() in real projects.
add() does not run handlersIt only queues. Pair with fire() / fireWith() (unless the list has memory and already fired).
A second fire() calls all current handlers again — not only newly added ones.
memory runs late adds immediatelyWith $.Callbacks("memory"), adding after a fire invokes the new handler right away with the last args (Deferred-style).
The same function reference added twice runs twice. Use "unique" or check has(fn) first.
After lock() or disable(), new add() calls do not stick. Inspect locked() / disabled() when debugging.
callbacks.add() is part of jQuery’s Callbacks API (since 1.7). It works in any browser where your jQuery build runs — the list logic lives in jQuery, not as a separate browser API.
Supported in jQuery 1.x, 2.x, and 3.x across Chrome, Firefox, Safari, Edge, and other browsers with jQuery loaded.
Bottom line: Safe wherever jQuery is loaded. Create lists with the right flags (once, memory, unique) before calling add().
| Operation | Cost | Best for |
|---|---|---|
add(fn) | O(1) append* | Registering handlers |
fire() | O(n) handlers | Invoking the full list |
add with unique | O(n) membership check | Preventing duplicate refs |
*Default append is cheap; unique walks the list to reject duplicates. Keep handlers light — heavy work inside callbacks blocks the whole fire() pass. Prefer named function references so remove() can find them later.
add() queues handlers; fire() runs them.memory, unique, and once change add/fire behavior — set them at creation.add() hooks safely.One line: add() is how you subscribe — fire() is how you publish.
Unregister specific handlers from a Callbacks list.
9 people found this page helpful