jquery deferrds

test.js

$(function(){
    var $tweetDiv = $("#tweets>div");

    $('li').on('click',function(){
        var $that = $(this);            
        //while we are cleaning up the div go ahead and get
        //the tweets
        $.when(
            getTweets($that.find('a').data('link'))
        //since we care weather the dfd was resolved or rejected we use the .done method
        //this only fires when the dfd is resolved
        ).done(
            //each function we call in the when will pass its response
            //to the then callback, in order
            function(tweets){
                //now lets fade the div out and remove everything that was in it
                //we could add add tweets in the clean div's fade out callback 
                //but this is more expressive in my opinion
                $.when(
                    cleanDiv()
                )
                //then is called weather the dfd is resolved or rejected
                .then(
                    function(){
                        //again we want to only show the div after the tweets
                        //have been added
                        $.when(
                            addTweets(tweets)
                        )
                        .then(
                            function(){
                                $tweetDiv.fadeIn('slow');
                            }
                        )
                        
                    }
                )
            }
        )
        //this is called when the deferred is rejected, in this
        //case when there is an issue getting tweets
        .fail(
            function(text){
                alert("Error getting tweets: " + text || '');   
            }
        )
    });

    var cleanDiv = function(){

        return $.Deferred(function(dfd){
            //otherwise fade the dive out before removing the children
            $tweetDiv.fadeOut('slow',function(){
                $tweetDiv.children().remove();
                dfd.resolve();
            });
        }).promise();
    };

    var addTweets = function(tweets){

        return $.Deferred(function(dfd){
            var stop = tweets.length - 1;
            $.each(tweets,function(i,tweet){
                var $newElem = $('<div><span class="username"></span><span class="tweettext"></span></div>');

                $newElem.find("span.username")
                    .html('<img src="' + tweet.profile_image_url_https + '">')
                    .end()
                    .find("span.tweettext")
                    .html(tweet.text)
                    .end()
                    .appendTo($tweetDiv);

                if(i === stop){
                    return dfd.resolve();
                }
            });
        }).promise();
    };

    var getTweets = function(searchURL){
        //since the deferred response relies on the data coming back from
        //the server we wrap the ajax call in a deferred. If we only wanted
        //to rely on the status of the ajax call we could have returned the
        //ajax call itself since it also returns a promise
        return $.Deferred(function(dfd){
            $.ajax({
                url : searchURL,
                
                dataType : 'jsonp',

                success : function(data){
                    //make sure what we got back valid data from twitter
                    if(typeof data === 'object' && ! ('error' in data)){
                        dfd.resolve(data.results);
                    }
                    else{
                        //we can pass variables to our callbacks
                        dfd.reject('bad response from server');
                    }
                },
                error : function(){
                    dfd.reject('ajax error');
                }
            });
        }).promise();
    };
});