jQuery: deferred/ promise

Question

I'm trying to figure out backbone from an example app (see https://github.com/elfsternberg/The-Backbone-Store). The code uses jQuery's Deferred and promise(), as you see in the code below. I've read the docs on jQuery, but am having trouble figuring out from the example below how these methods are used. You might need more code to answer this question, but maybe not. These are the questions I have about it

1) is dfd.resolve called once fadeOut is done? if so, what does dfd.resolve trigger?

2) What is happening by returning promise.promise(); is it calling the Deferred method? when? why is it done this way? this seems like a recursive method?

3) is it possible that dfd.resolve is triggering other methods not shown in this code?

      hide: function() {
            if ((":visible") === false) {

                return null;

            }
            promise = $.Deferred(_.bind(function(dfd) { 
                this.el.fadeOut('fast', dfd.resolve)}, this));
            return promise.promise();
        },

        show: function() {
            if (this.el.is(':visible')) { 
                return;
            }       
            promise = $.Deferred(_.bind(function(dfd) { 
                console.log("in promise section of show in base view");
                this.el.fadeIn('fast', dfd.resolve) }, this))
            return promise.promise();
        }

For the second question, see http://stackoverflow.com/q/8073528/1048572 — Bergi, May 17 '14 at 23:50

Josh · Accepted Answer · 2012-09-30T04:56:34.887

1) is dfd.resolve called once fadeOut is done? if so, what does dfd.resolve trigger?

Yes. jQuery.fadeOut takes in a callback as one of it's parameters. Once the animation is complete it will execute the callback. In this case, it happens to be the resolve method of the Deferred.

2) What is happening by returning promise.promise(); is it calling the Deferred method? when? why is it done this way? this seems like a recursive method?

Nothing recursive is going on here. promise is just a variable that holds a reference to the created Deferred object. promise() is a method on a jQuery.Deferred that returns a modified version of the Deferred that does not allow you to modify how it behaves. Hence the promise that the caller can be sure it will always execute the same way.

3) is it possible that dfd.resolve is triggering other methods not shown in this code?

Yes. A Deferred is nothing more than an object that allows you to register callbacks. Calling .resolve() on a Deferred will trigger the done handlers, while calling .reject() will trigger any fail handlers.

A very shorthand example might look like this:

//A Deferred takes in a function that will be passed a reference
// to the Deferred object. This allows you to resolve or reject
// it at some point in the future.
var promise = $.Deferred(function(def){

   setTimeout(function(){

      def.resolve('Five seconds have passed!');      

   }, 5000);

}).promise();

//This will only get executed when the
// underlying Deferred gets resolved
promise.done(function(msg){

   alert(msg); // Displays: 'Five seconds have passed!'

});

thanks, so if calling resolve() on a deferred will trigger done handlers, what are the done handlers in the code in the OP? that's what I don't understand. Nothing seems to happen after dfd.resolve — BrainLikeADullPencil, Sep 30 '12 at 05:10
@user1647484 - I haven't seen the rest of the code so I don't really know, but I get the idea seems to be that you would call hide or show on the view and chain the callbacks onto it so you could guarantee that subsequent actions executed after the animation was finished. — Josh, Oct 01 '12 at 02:09

jQuery: deferred/ promise

1 Answers1