Question

I’m playing with $.when and deferred to control flow of several functions. I need a little clarity on why something isn’t working and how it should be coded to work.

The end objective for this contrived example can be reached with inline callbacks but that is not the solution I’m looking for as each individual function is more complex than the example. The final code should do the following:

• animate box 2
• wait a second
• animate box 3 after box 2 has finished and there has been a brief pause
• wait a second
• then animate box1 after box 3 has finished and there has been a brief pause
• Finally alert saying everything is complete after everything is complete

I have tried many variations of this but I will try and present the ones that cause me the most grief. a frustrating fiddle found here

I began with the easiest piece, alerting a message after the 3 boxes where finished animating:

var a = $('.box1').animate({top: '100px'}, 2000),
    b = $('.box2').animate({top: '100px'}, 1000),
    c = $('.box3').animate({top: '100px'}, 2000);

$.when( a, b, c )
    .done( function(){ alert( 'all done' )} );​

no problem… I actually started to think I knew what I was doing…NOPE!

I next figured, I should be able to separate each variable into it’s own respective function… but that made the alert happen first, and then the animations reached their end abruptly by ignoring their animation duration time!

function a(){
    $('.box1').animate({top: '100px'}, 2000);
}
function b(){
    $('.box2').animate({top: '100px'}, 1000);
}
function c(){
    $('.box3').animate({top: '100px'}, 2000);
}

a();
b();
c();
$.when( a(), b(), c() )
    .done( alert('all done') );

Seems like a scope thing? So what if I move the $.when into the respective function to call the next one in line… again in the real world there is a lot more happening than just a single elements animation.

That didn’t work! why exactly? the alert pops up first again! huh? and then all the boxes animate quicker than specified to their final positions:

function a(){
    a = $('.box1').animate({top: '100px'}, 2000);
    $.when( a ).done( alert( 'all boxes moved down' ) );
}
function b(){
    b = $('.box2').animate({top: '100px'}, 1000);
    $.when( b ).done( c() );
}
function c(){
    c = $('.box3').animate({top: '100px'}, 2000);
    $.when( c ).done( a() );
}

b();

By jsfiddle update 100 I’m on stack overflow…but wait I figured, lets make it even simpler, remove all the $.when from each function and just add one after I call b() to fire off c()… unfortunately b() and c() fired simultaneously! What am I missing here?

function a(){
    a = $('.box1').animate({top: '100px'}, 2000);
}
function b(){
    b = $('.box2').animate({top: '100px'}, 1000);
}
function c(){
    c = $('.box3').animate({top: '100px'}, 2000);
}      

$.when( b() ).done( c() );

Never mind the fact that I was thinking I could

$.when( b() ).delay(1000).done( c() );

I’m trying like crazy to understand this when, done, and deferred stuff (which I can post more on if needed :)!) After watching an hour long jquery developer presentation on the stuff I thought I could implement it for this situation… In the end I have a simple task, and am obviously missing something! I would appreciate any direction / explanation offered.

html and css

<div class='boxes'>
    <div class='box box1'></div>
    <div class='box box2'></div>
    <div class='box box3'></div>
</div>​

.box{width: 40px; height: 40px; background-color: green; position:absolute;}
.box1{left: 0px;}
.box2{left: 60px;}
.box3{left: 120px;}

Answer 1

When you started wrapping your animations in functions, you need to make sure that the function returns an object that contains a promise method. for example,

function a() {
    return $('.box1').animate({top: '100px'}, 2000);
}

now you can do:

$.when( a(), b(), c() ).done(function() {
    alert("all done!");
});

Now you can split that to control the order:

// run b and wait one second, when done run c and wait 1 second, then run a
b().delay(1000).promise().done(function(){
    c().delay(1000).promise().done(a);
});

Since you are never dealing with more than one promise at a time, you don’t need $.when at all.