CODEWITHSUNDEEP
javascriptjquerycallback
romellem
romellem

Reputation: 6491

Avoid giant cascading in jQuery?

I feel like this is something that is solved by "deferreds" or "promises" that I've heard about in jQuery, but looking searching for related articles on that doesn't exactly show me what I'm looking for.

I want to be able to do a simple jquery function call (like animate() or slideUp()) then call another simple function when it is completed. Of course I know about slideUp(400, function(){ //onComplete... }); but if you have a large cascade of animations, that can get pretty hairy pretty quickly.

Check out the following jsfiddle: http://jsfiddle.net/ue3daeab/

When you click the first button, you see the visual effect I want to acheive. However, I'm accomplishing it with "cascade hell," and the relevant code being:

$("#clickme").click(function(){
    //Cascade hell

    $("#my1").slideUp(400, function(){
        $("#my2").slideUp(400, function(){
            $("#my3").slideUp(400, function(){
                $("#my4").slideUp(400, function(){
                    $("#my5").slideUp(400, function(){
                        $("#my6").slideUp(400, function(){
                            $("#my7").slideUp(400, function(){
                                $("#my8").slideUp(400, function(){
                                    $("#my9").slideUp(400, function(){
                                        $("#my10").slideUp(400);
                                    });
                                });
                            });
                        });
                    });
                });
            });
        });
    });

});

When you click button 2, all the divs collapse at once, which isn't the effect I want. I feel like I should be able to do something like this, but obviously it doesn't work. The relevant code for the 2nd button is:

$.when($("#my1").slideUp())
.done($("#my2").slideUp())
.done($("#my3").slideUp())
.done($("#my4").slideUp())
.done($("#my5").slideUp())
.done($("#my6").slideUp())
.done($("#my7").slideUp())
.done($("#my8").slideUp())
.done($("#my9").slideUp())
.done($("#my10").slideUp());

Any advice? Thanks.

Upvotes: 0

Views: 63

Answers (2)

loganfsmyth
loganfsmyth

Reputation: 161467

Why not use a simple array of ids to collapse, and then collapse them one item at a time?

$("#clickme").click(function(){
    var toCollapse = ["#my1", "#my2", ...];

    (function collapse(){
        var id = toCollapse.shift();
        if (!id) return;

        $(id).slideUp(400, collapse);
    })();
});

I edited your jsfiddle with this example too: http://jsfiddle.net/ue3daeab/2/

Upvotes: 3

Mike B
Mike B

Reputation: 1446

I would do something like this: UNTESTED

$.each($('.item', '#container'), function(index, value) { 
        $(this).delay(50*index).slideUp(400);
});

This way everything doesn't try to happen all at once.

Upvotes: 0

Related Questions