从嵌套动画返回结果

Question

我有一个动画循环用于处理单个字母。它被包裹在一个计时器中，以创建一个延迟的偏移量。每个字母比前一个字母晚 100 毫秒。我需要弄清楚如何判断完整动画何时完成，但由于使用的嵌套类型不同，我遇到了一些麻烦。

我尝试了一些不同的方法，包括尝试从动画中返回一个值，然后是计时器，然后是 $.each 函数，但我确定这是关闭的。我还想我也许可以使用 jQuery 的 animate 函数提供的承诺，但不确定如何实现这一点。这里的任何建议将不胜感激:] 谢谢

这是我当前的代码：

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 );

        });

    }

编辑：对不起，我意识到我省略了偏移变量。我把它加回去了——它只是设置为 200。

另外，我意识到这个问题与另一个问题相似，但似乎也有所不同。此处提供的答案提供了其他问题中不存在的几种不同方法。

Answer 1

一种利用.promise() $.when()、Function.prototype.apply()、$.map()、.delay()的方法。注意用$.when() 替换.apply() 到.promise() 的链接以将this 作为包含元素的jQuery 对象而不是包含.then() 处的jQuery 对象的数组返回

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>

---

或者，使用$.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

您可以在每个setTimeout 调用中做出承诺，并且您不需要自己跟踪所有异步操作都已完成。

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);
}

请注意，您可能需要Promise polyfill 请参阅http://caniuse.com/#feat=promises

与现有的检查索引相比，我的答案的一个好处是，如果您将动画更改为向后，则必须在两个地方修改代码。请参阅下面我的版本，其中字母向后（和向前）飞出。

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

你可以使用$.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

正如其他人所说，您可以使用 $.Deferred()` 只是为了说明我添加了一个基于给定代码的示例。 ;-)

//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>