moyen moins détaillé d’enchaîner les événements jquery qui doivent attendre des animations?

Question

L'enchaînement est excellent dans jQuery, mais il enchaîne le déclencheur de chaque événement et n'attend pas que l'événement précédent se termine. Cela se remarque principalement lors de l’animation.

En tant que tel, la solution que j’ai vue consiste à utiliser des fonctions de rappel. Le seul inconvénient est que, par exemple, vous souhaitiez animer successivement 4 choses.

Certes, c’est probablement quelque chose que vous ne voulez pas faire très souvent, mais lorsque vous le faites, le balisage semble devenir un peu prolixe. Exemple (pseudocode):

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

Dans cette situation, est-ce la meilleure façon / la plus succincte d’agir?

Answer 1

Essayez ce qui suit ..:)

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