Reputation: 2133
Looking at the documentation, $.Deferred and $.Callbacks appear to do very similar things. When would I want to use one over the other?
Callbacks: https://api.jquery.com/category/callbacks-object/
Deferred: https://api.jquery.com/category/deferred-object/
Upvotes: 0
Views: 655
Reputation: 629
As taxicala mentioned $.Callabcks is used to manage a list of callbacks.
$.Deferred is used when you need to monitor the progress of an AJAX/non-blocking function
Run this example to see the $.Deferred functionality
function nonBlocking() {
var defer = $.Deferred();
// setTimeout is a non-blocking function
setTimeout(function () {
alert('Non-Blocking function call after thread ends');
defer.resolve();
}, 0);
return defer;
}
// Now you can chain a done or fail handler to the method call
nonBlocking().done(function () {
alert('Non-Blocking function is done');
});
alert('End of main thread comes before the non-blocking function');
Upvotes: 1
Reputation: 21789
They do not do very similar things
. $.Callbacks
is used as a container of callback functions, for example, lets say you have to code a function that receives 10 callbacks (either as an array of callbacks or each one as a parameter), you would have to loop the array of callbacks and fire each one of them, or write 10 lines of code (one for each callback parameter), now, having $.Callbacks
, you can pass that object to the function (having previously pushed your 10 callbacks to it by using the add
method) and then simply call callbacks.fire()
and all callbacks will be fired.
Example without $.Callbacks
and parameters:
function doSomethingAndThenFireManyCallbacks(cb1, cb2, cb3, cb4, cb5, cb6) {
//do something.
cb1();
cb2();
cb3();
cb4();
cb5();
cb6();
}
doSomethingAndThenFireManyCallbacks(fn1, fn2, fn3, fn4, fn5, fn6);
Example without $.Callbacks
and array of callbacks:
function doSomethingAndThenFireManyCallbacks(callbacks) {
//do something.
for (var i = 0; i < callbacks.length; i++) {
callbacks[i]();
}
}
doSomethingAndThenFireManyCallbacks(fn1, fn2, fn3, fn4, fn5, fn6);
Example with$.Callbacks
:
function doSomethingAndThenFireManyCallbacks(callbacks) {
//do something.
callbacks.fire();
}
var callbacks = $.Callbacks();
callbacks.add([fn1, fn2, fn3, fn4, fn5, fn6]);
doSomethingAndThenFireManyCallbacks(callbacks);
By using $.Callbacks
, the code you have to write is less and it's quite more easy to read.
Now, as per the $.Defered
thing, this is jquery's implementation of the promise api, it's an alternate method of handling callbacks for asynchronous
requests or processes, where instead of passing a callback to be executed once the request/process finishes, you get a promise, that allows you to chain your functions. This way the code is more easy to read and debug since your function declaration and use of it is in the same place, you don't have to guess what function a parameter called callback
really is or comes from.
Anyhow, you should read more about promises since my explanation is just basic in order to state the differences between both $.Callbacks
and $.Deferred
.
Upvotes: 1