Jquery : arrêter la récursivité avec un événement

Question

Je suis en train d'animer 3 points de façon récursive. Je voudrais arrêter la récursion après avoir cliqué sur #monElément.

Voici mon code :

    $(document).ready(function(){       
        var positions = {
            'pos1': {"X": $('#point_1').css('left'), "Y": $('#point_1').css('top')},
            'pos2': {"X": $('#point_2').css('left'), "Y": $('#point_2').css('top')},
            'pos3': {"X": $('#point_3').css('left'), "Y": $('#point_3').css('top')},
        };

        animate3Points(positions);
    }); 

    function animate3Points(p) {
        animatePoints('#point_3', p, p.pos1);
        animatePoints('#point_2', p, p.pos2);
        animatePoints('#point_1', p, p.pos3);
    }

    function animatePoints(selector, p, pos) {
        $(selector).animate({
            'left': pos.X , 
            'top':  pos.Y
        }, 2000, 'easeInOutQuad', function() {

            // while #myElement has not been clicked,
            // call again animate3points for recursivity :

            if (selector == '#point_1') { // just to be recalled one time
                p2 = changePosition(p);
                animate3Points(p2);
            }

            // end while

        });
    }

    function changePosition(obj) {
        firstEl = obj.pos1;
        obj.pos1 = obj.pos2;
        obj.pos2 = obj.pos3;
        obj.pos3 = firstEl;

        return obj;
    }   

L'animation fonctionne mais il faudrait peut-être l'implémenter d'une autre manière pour arrêter la récursion.

Une idée ?

Answer 1

Vous devez utiliser une variable globale instanciée en dehors de votre fonction et l'utiliser comme condition logique pour savoir quand les appels récursifs doivent s'arrêter. Par exemple :

var keepAnimating = true;

function animate3Points(p) {
    if(keepAnimating) {
        animatePoints('#point_3', p, p.pos1);
        animatePoints('#point_2', p, p.pos2);
        animatePoints('#point_1', p, p.pos3);
    }
}

Sur votre événement de clic, vous devez définir keepAnimating = false; . Cela arrêtera la récursion, mais vous devrez peut-être aussi arrêter l'animation.

Cependant, la récursion infinie est une très mauvaise idée. Vous ferez en sorte que le navigateur utilise beaucoup de mémoire. Vous devriez optimiser votre code pour utiliser des boucles plutôt que la récursion.