强制操作从 $.each 循环排队

Question

我正在使用 jquery 制作 html 元素（卡片）的动画。我需要为发牌动作设置动画（“一张给你，一张给我，一张给你，一张给我......”），因此希望卡片在下一张开始之前完全动画化（移动位置）。我在 $.each 函数中创建卡片并从那里调用动画（以避免不必要的再次循环）。当卡片添加到页面时，动画开始，但循环然后移动到下一张卡片，而不等待动画完成。这使得所有卡片看起来完全同时动画，而不是顺序动画。如何让循环等待动画回调？这可以通过触发器来完成吗？我可以手动对项目进行排队吗？

我的（错误）代码的精简版本：

var card = [
  { id:1, pos:{ x:100, y:100 } },
  { id:2, pos:{ x:150, y:105 } },
  { id:3, pos:{ x:200, y:110 } }
];

$.each(card, function() {
  $('#card_' + this.id).animate({ top:this.pos.y, left:this.pos.x });
});

演示@ http://jsbin.com/akori4

Answer 1

您不能在 JavaScript 循环中执行此操作，必须在 animate< 上使用回调参数/code>调用触发下一张卡片的动画。像这样的东西：

var card = [
    { id:1, pos:{ x:100, y:100 } },
    { id:2, pos:{ x:150, y:105 } },
    { id:3, pos:{ x:200, y:110 } }
];

doOne(0);

function doOne(index) {
    var thisCard = card[index];
    if (thisCard) {
        $('#card_' + thisCard.id).animate({
            top:    thisCard.pos.y,
            left:   thisCard.pos.x
        }, function() {
            doOne(index + 1);
        });
    }
}

这是一个实例 当然，我会将所有这些包装在一个函数中以避免创建不必要的全局符号。

Answer 2

您可以使用 .delay()，如下所示：

$.each(card, function(i) {
  $('#card_'+this.id).delay(i*400).animate({ top:this.pos.y, left:this.pos.x });
});

这是您的更新/工作演示。

每个动画（默认情况下）需要 400ms，第一个参数为 $.each() 回调是索引，因此第一个延迟 0*400，第二个延迟 1*400，等等...有效地一个接一个地运行它们。

另外，如果您不需要这些 x/y 格式变量，您可以将它们存储为 top/< code>left 并直接传递这些动画属性，如下所示：

var card = [
  { id:1, pos:{ left:100, top:100 } },
  { id:2, pos:{ left:150, top:105 } },
  { id:3, pos:{ left:200, top:110 } }
];

$.each(card, function(i) {
  $('#card_'+this.id).delay(i*400).animate(this.pos);
});

Answer 3

这是另一种方法：

var card = [
    {elem: $('#card_1'), id:1, pos:{ x:100, y:100 } },
    {elem: $('#card_2'), id:2, pos:{ x:150, y:105 } },
    {elem: $('#card_3'), id:3, pos:{ x:200, y:110 } }
];

(function loop(arr, len){
    if(len--){      
        arr[len].elem.animate({top: arr[len].pos.y, left: arr[len].pos.x}, 400, function(){
           loop(arr, len);
        });     
    }
}(card.reverse(), card.length));

实际操作： http://jsbin.com/akori4/6/edit

Answer 4

这可能会因为正常的回调而变得混乱，因为每个动画都需要在其回调中调用下一个动画。当然，您可以使用计时器或延迟来创建暂停，但这并不能保证完整的动画在下一个动画开始之前完成。如果动画花费的时间少于超时时间，则每个动画之间可能会有暂停。

另一种方法是研究 Promises 和 Futures。尽管我不执行动画，但我的应用程序具有必须按特定顺序处理的逻辑。我一直在使用 FuturesJS 库来帮助简化事情。乍一看可能有点吓人，但它确实非常强大。看一下 .chainify() 方法。

我意识到这对于您的简单用例来说可能有点过分了，但我认为了解 Promise 是值得的。