Как я могу заставить свой скрипт ждать завершения анимации jQuery? - PullRequest
1 голос
/ 03 января 2012

У меня есть функция 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
                }
            }
        }
    }
}

Но скрипт продолжит работу даже после запуска анимации.Есть ли простой способ исправить это или мне нужно будет заново изобрести цикл с помощью вызовов функций?

Ответы [ 2 ]

3 голосов
/ 03 января 2012

Вы не очень ясно поняли в своем вопросе, чего именно вы хотите ждать.Я предполагаю, что вы хотите дождаться завершения каждой анимации, прежде чем переходить к следующей.

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/

1 голос
/ 03 января 2012

Сначала вы можете использовать анимационный обратный вызов jQuery - http://jsfiddle.net/zutBh/1/.

Во-вторых, существует jQuery.deffereds объект.

...