Question

我有一个名为runUpdates的函数，我将JSON对象数组传递给它。此函数查看对象并使用if语句来决定它的更新类型以及处理该更新应采用的方向。在某些情况下，更新会绑定一个动画。我想使用jQuery的动画来动画这些动画，但我希望它等待动画完成，然后再进行下一步。

我的程序看起来像这样 -

runUpdates(updates) {
    for(i = 0; i < updates.length; i++) {
        update = updates[i];
        if(update.type = "blabla") {
            //do stuff
        } else {
            //do other stuff
            if(update.animations) {
                for(k = 0; k < animations.length; k++) {
                    //do jquery animate AND wait for animation to finish before proceeding
                }
            }
        }
    }
}

但即使在动画开始后脚本仍将继续运行。有没有一种简单的方法来解决这个问题，还是我需要通过函数调用来重新发明循环？

Answer 1

你的问题中你不清楚你想要等什么。我假设您要等待每个动画完成，然后再继续下一个动画。

var pipe = $.Deferred().resolve();

for(var k = 0; k < animations.length; k++)
{
    pipe = pipe.pipe(function()
    {
        return $('element').animate({
            // animate whatever you want
        }, 300);
    });
}

以下是演示：http://jsfiddle.net/ZyS6c/

如果您想在所有动画完成后运行一些代码，请将其放在done函数中：

pipe.done(function()
{
    // Put your code here...
});

...这里是小提琴：http://jsfiddle.net/ZyS6c/1/

如果您对链接动画不感兴趣（希望它们以异步方式执行），并且只想在所有动画完成后运行一些代码，请使用：

var deferreds = [];

for(var k = 0; k < animations.length; k++)
{
    deferreds.push(
        $('element').animate({
            // animate whatever you want
        }, 300)
    );
}

$.when.apply($, deferreds).done(function()
{
    // Put your code here...
});

...最后，这是小提琴：http://jsfiddle.net/pdDME/

Answer 2

首先，您可以使用jQuery的动画回调 - http://jsfiddle.net/zutBh/1/。

第二个是jQuery.deffereds个对象。

如何让我的脚本等待jQuery动画完成？

2 个答案: