менее подробный способ цепочки событий jquery, которые должны ждать анимации?

Question

Цепочка хороша в jQuery, но она запускает триггер каждого события и не ждет завершения предыдущего события. Это заметно прежде всего при анимации.

Обходной путь, который я видел, состоит в том, чтобы использовать функции обратного вызова. Единственный недостаток - если, скажем, у вас есть 4 вещи, которые вы хотите анимировать подряд.

По общему признанию, это, вероятно, то, что вы не хотите делать очень часто, но когда вы делаете, разметка кажется немного многословной. Пример (псевдокод):

element.animate(fast, callBackFunction1(element1,element2,element3);

function callBackFunction1(element1,element2,element3){
    element1.animate(fast, callBackFunction2(element2,element3));
};

function callBackFunction2(element2,element3){
    element2.animate(fast, callBackFunction3(element3));
};

function callBackFunction3(element3){
    element3.animate(fast);
};

В этой ситуации это лучший / самый лаконичный способ действовать?

Answer 1

Попробуйте следующее ..:)

element.animate(fast, function() {
    element1.animate(fast, function() {
        element2.animate(fast, function() {
            element3.animate(fast);
        });
    });
});

Answer 2

var animElements = [
    element,
    element1,
    element2,
    element3,
];

function animateChain(elements) {
    if(elements.length > 0) {
        var element = elements.pop();
        element.animate("fast", function(){ animateChain(elements); });
    }
}

animateChain(animElements);