jQuery deferred animation

Анимация

Альтернативным и более гибким использованием колбэков для jQuery-методов анимации является deferred-технология:


Вместо

$(selector).animate(..., function () {...});

Можно использовать

var dfd = $(selector).animate(...);

И в том месте кода, где предполагается выполнить действия, следующие по завершению анимации, делаем:

dfd.done(function () {
    // place your code here
});

Более наглядно гибкость такого подхода можно отразить в примере с двумя и более анимациями:

var dfd1 = $(selector1).animate(...);
var dfd2 - $(selector2).animate(...);

$.when(dfd1, dfd2).done(function () {
    // place your code here
});

В этом примере отложенное исполнение кода придет в действие после успешного выполнения каждой из анимаций.

К слову, вышеописанное применимо и к другим анимационным методам, например, fadeIn, fadeOut.

Обобщение

Собственно, общее использование deferred-технологии описывается в promise-объектах:

var dfd = $.Deferred();

// Некая асинхронная функция
(function () {
    dfd.resolve(); // Указываем, что с данного момента отложенный код может быть выполнен.
})();

dfd.promise().done(function () {
    // Отложенный код
});

Например:

var dfd = $.Deferred();

$(selector).fadeOut(300, function () {
    console.log('1');
    dfd.resolve();
});

dfd.promise().done(function () {
    console.log('2');
});

В консоли пример выведет:

1
2

Подробнее http://api.jquery.com/category/deferred-object/.