modo meno prolisso di concatenare eventi jquery che devono attendere animazioni?

Question

Il concatenamento è eccezionale in jQuery, ma concatena il trigger di ciascun evento e non attende la fine dell'evento precedente. Ciò è evidente soprattutto durante l'animazione.

Come tale, la soluzione alternativa che ho visto è quella di utilizzare le funzioni di richiamata. L'unico inconveniente è se, diciamo, hai 4 cose che vuoi animare in successione.

Certo, questo è probabilmente qualcosa che non vuoi fare molto spesso, ma quando lo fai, il markup sembra diventare un po 'prolisso. Esempio (pseudocodice):

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);
};

In quella situazione, è questo il modo migliore / più conciso per fare le cose?

Answer 1

Prova quanto segue .. :)

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);