Understanding $.Deferred() sequencies and $.fn.pipe()

Question

I am stuck in this code:

reload: function() {
            var self = this;
            $.when(self.unload()).then(function() {
                self.load();
            });
        },
load: function() {
            var self = this;
            $.ajax({
                url: self.options.url,
                success: function(data) {
                    $.Deferred(
                        function(dfr) {
                            $.each(data, function() {
                                var div = $('<div></div>')
                                    .addClass('nw-item')
                                    .html('newsitem.ejs', this)
                                    .hide()
                                    .appendTo(self.element);
                                dfr = dfr.pipe(function() {
                                    return div.slideDown(self.options.speed);
                                });
                            });
                        }).resolve();
                }
            })
        },
unload: function() {
            var items = this.element.children('.nw-item').reverse(),
                self = this,
                udfd = $.Deferred(
                    function(dfr) {
                        $.each(items, function() {
                            var div = $(this);
                            dfr = dfr.pipe(function() {
                                return div.slideUp(self.options.speed);
                            });
                        });
                    }).resolve();
            return udfd;
        }

in "reload" I need to start "load" sequence after "unload" sequence is completed, but it starts right after first iteration of "unload" sequence element becomes hidden. Help me please, I'm stuck(

Answer 1

Not tested but try this:

unload: function() {
    var items = this.element.children('.nw-item').reverse();
    var self = this;
    var udfd = $.Deferred();
    var chain;
    $.each(items, function() {
        chain = udfd.pipe(function() {
            return $.Deferred(function(deferred) {
                div.slideUp(self.options.speed, function() {
                    // callback function gets executed when slideUp is done
                    deferred.resolve();
                });                
            }).promise();
        });
    });
    chain.done(function() {
        udfd.resolve();
    });
    return udfd.promise();
}

Since your jQuery.slideUp function is asynchronous BUT does not return an Deferred Object like e.g. jQuery.ajax you have to manually return a Deferred/promise. When your chain of piped functions is done it resolves the main Deferred. Don't forget to return a promise for the main Deferred.

Like I said, no guarantee but you could give it a try!