CODEWITHSUNDEEP
jquery
scottmrogowski
scottmrogowski

Reputation: 2133

JQuery: Deferred vs Callbacks

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

Answers (2)

malinkody
malinkody

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

taxicala
taxicala

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

Related Questions