Return a result from nested animation

Question

I have an animation loop used to manipulate individual letters. It's wrapped in a timer in order to create a delayed offset. Each letter animates 100 ms later than the previous. I need to figure out how I can tell when the full animation is complete but I'm having some trouble because of the different types of nesting in use.

I've tried a few different things including trying to return a value from the animation, then the timer, and then the $.each function, but I'm sure this is off. I also was thinking I might be able to use the promise provided by jQuery's animate function, but not sure exactly how to implement this. Any advice here would be appreciated :] thank you

Here is my current code:

var offset = 200;
//drop individual letters down out of view
    function dropLetters($letters){

        var len = $letters.length - 1;

        $letters.each(function(i){

            var $letter = $(this);

            setTimeout(function(){

                $letter.animate({ top: offset + 'px' }, 300, function(){
                    if( i >= len ){
                        return $(this).promise();
                    }
                });

            }, 100 * i );

        });

    }

Edit: Sorry I realize I have omitted the offset variable. I added this back - it was just set to a value of 200.

Also, I realize this question is similar to another, but it also seems to differ from it. The answers provided here give a couple of different approaches that aren't present in the other question.

Answer 1

An approach utilizing .promise() $.when() , Function.prototype.apply(), $.map(), .delay(). Note substituted chaining .apply() to .promise() for $.when() to return this as jQuery object containing elements instead of array containing jQuery objects at .then()

var offset = 100, duration = 300, delay = 100, curr = 0;

function dropLetters(elems) {
  return $.fn.promise.apply(elems, $.map(elems, function(el) {
    return $(el).delay(curr += delay).animate({top: offset + "px"}, duration)
  }))
}

dropLetters($("button")).then(function() {
  console.log("complete", this)
})

button {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button>
  0
</button>

<button>
  1
</button>

<button>
  2
</button>

---

Alternatively, using $.when() , .queue()

var offset = 100, duration = 300, delay = 100, curr = 0;

function dropLetters(elems) {
  return $.when(elems.queue(function (next) { 
    $(this).delay(curr += delay).animate({top:offset + "px"}, duration, next())}))
}

dropLetters($("button")).then(function() {
  console.log("complete", this)
})

button {
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<button>
  0
</button>

<button>
  1
</button>

<button>
  2
</button>

Answer 2

You can make a promise out of each setTimeout call and you don't need to track by yourself that all the async operations have finished.

function dropLetters($letters){
  var promises = [];
  $letters.each(function(i){
    var $letter = $(this);
    promises.push(new Promise(function(resolve, reject) {
      setTimeout(function(){
        $letter.animate({ top: offset + 'px' }, 300, function(){
            resolve();
        });
      }, 100 * i );
    });               
  });
  return Promise.all(promises);
}

Note that you may need a Promise polyfill See http://caniuse.com/#feat=promises

One of the benefits of my answer over the existing ones that check index is that you would have to modify the code in two places if you changed the animation to be backwards. See my version below where the letters fly out backwards (and forward).

function dropLetters($letters, backwards) {
  var promises = [];
  $letters.each(function(i) {
    var $letter = $(this);
    promises.push(new Promise(function(resolve, reject) {
      setTimeout(function() {
        $letter.animate({
          top: '-100px'
        }, 300, function() {
          resolve();
        });
      }, 100 * (backwards ? $letters.length - i : i));
    }));
  });
  return Promise.all(promises);
}

dropLetters($('p')).then(function() {
  alert('finished')
});
  
dropLetters($('span'), true).then(function() {
  alert('finished')
});

p, span {
  position: relative;
  float: left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>
<p>A</p>

<hr style="clear: both"/>

<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>
<span>B</span>

Answer 3

You could use $.Deferred() , .resolveWith()

function dropLetters($letters) {

  var len = $letters.length - 1;

  var dfd = $.Deferred();

  $letters.each(function(i) {

    var $letter = $(this);

    setTimeout(function() {

      $letter.animate({
        top: offset + 'px'
      }, 300, function() {
        if (i >= len) {
          dfd.resolveWith($(this));
        }
      });

    }, 100 * i);

  });

  return dfd.promise()

}

Answer 4

As thers have stated you may use $.Deferred()` Just to illustrate i added an example based on given code. ;-)

//drop individual letters down out of view
    function dropLetters($letters){
        var deferred = jQuery.Deferred();
        
        $letters.each(function(i,elem){
            var $letter = $(elem);

            var timer = setTimeout(function(){        

                $letter.animate({ top: $letter.offset().top-100 }, 300, function(f){
                   if(i+1>=$letters.length){// last letter was animated
                       deferred.resolve();
                   }
                });
              
            }, 300*i );

        });
        return deferred;

    }
dropLetters($('p')).then(function(){alert('finished')});

p{
  position:relative;
  float:left;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p><p>A</p>