Defer a Function Until Several Animations Complete

Question

I've found a lot of questions about deferring, promises, running javascript synchronously, etc. and I've tried numerous things already but still can't get this to work.

Edit Here's a little more explanation on the problem. fetchData has a routine that depends on all the code inside showStuff being complete. In particular, there's divs that get created using percentage of screen size, and we need to get the height of those divs so we can draw gauges inside them. fetchData is running before slideDown() is complete. Please see the additional console.log code I've added directly below.

My button onClick() calls showOverlay().

function showOverlay() {
    showStuff().promise().done( function() {
        console.log($("#gauge1").height()); //returns -0.5625 or something close
        fetchData(); //ajax call
    });
}

function showStuff() {
    $("#overlay").fadeIn(200);
    $("#gauges").slideDown(800);
    $(".gauge").each(function() {
        $( this ).show(); //unhides #gauge1 div
    });         
}

The error I'm getting says: cannot call method 'promise' of undefined.

I'm not showing my fetchData() function but it basically uses ajax to call a web service and then creates gauges on the screen using Raphael. If fetchData runs before the animations are complete the gauges are not displayed correctly because their size is relative to the .gauge div's.

Edit1

Neither of the examples below work. They both run without errors but return too quickly.

function showOverlay() {
    showStuff().promise().done(function() {
        fetchData();
    });  
}

function showStuff() {
    var def = $.Deferred();
    $("#overlay").fadeIn(200);
    $("#gauges").slideDown(800);
    $(".gauge").each(function() {
        $( this ).show();
    });
    def.resolve();
    return def;
}

Doesn't work either:

function showOverlay() {
    $.when(showStuff()).done(function() {
           fetchData();
       });
}

function showStuff() {
    $("#overlay").fadeIn(200);
    $("#gauges").slideDown(800);
    $(".gauge").each(function() {
        $( this ).show();
    });         
}

score 2 · Accepted Answer · answered Feb 25 '14 at 02:45

2

You've 2 issues, the deferred and thats not how you run animations one after the other.

This will get you part of the way:

function showStuff() {
  var deferred = $.Deferred();
  $("#overlay").fadeIn(300,function(){
    $("#gauges").slideDown(800,function(){
      $(".gauge").show(); //doing this one after another takes more code.
      deferred.resolve();
    });
  });

  return deferred;
}

Heres the codepen: http://codepen.io/krismeister/pen/pvgKj

If you need to do sophisticated animations like this. You might find better results with GSAP. Heres how to stagger: http://www.greensock.com/jump-start-js/#stagger

answered Feb 25 '14 at 02:45

LessQuesar

3,123
1
21
29

So what does it take to do a for each loop and still use a deferr object? – HK1 Feb 25 '14 at 02:51
do this http://stackoverflow.com/questions/4143308/jquery-each-including-a-delay-looking-for-clean-code then to make sure the deferred is only called on the last animation completed, do this: http://stackoverflow.com/questions/4006822/last-element-in-each-set – LessQuesar Feb 25 '14 at 12:17
heres the (TimelineLite) GSAP way todo chaining. http://www.greensock.com/jump-start-js/#timelinelite-syntax its a shame gsap hasn't become mainstream. Back in the flash days, everyone used the flash version tweenmax. – LessQuesar Feb 25 '14 at 12:34

score 0 · Answer 2 · answered Feb 25 '14 at 02:15

0

Try to use $.when() instead:

$.when(showStuff()).done(function() {
    fetchData();
});

answered Feb 25 '14 at 02:15

Felix

37,892
8
43
55

2

But `showStuff()` doesn't return anything. How can this possibly work? – jfriend00 Feb 25 '14 at 02:19
Have tried this multiple times and just tried it again. It doesn't work. – HK1 Feb 25 '14 at 02:20
@HK1 Where is your ajax call inside `showStuff()` function? – Felix Feb 25 '14 at 02:25
It's called fetchData() – HK1 Feb 25 '14 at 02:30
Prove your answer works for my situation and I'll vote it back up. – HK1 Feb 25 '14 at 03:22

score 0 · Answer 3 · answered Feb 25 '14 at 07:53

You a) need to return something from showStuff b) should return a promise directly, so that the .promise() method is unnecessary:

function showOverlay() {
    showStuff().done(function() {
        fetchData();
    });  
}

function showStuff() {
    return $("#overlay").fadeIn(200).promise().then(function() {
        return $("#gauges").slideDown(800).promise();
    }).then(function() {
        return $(".gauge").show().promise();
    });
}

Defer a Function Until Several Animations Complete

3 Answers3