2

3点を再帰的にアニメートしています。#myElementをクリックした後、再帰を停止したいと思います。

これが私のコードです：

    $(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;
    }

アニメーションは機能しますが、再帰を停止するには別の方法で実装する必要があるかもしれません。

アイデア ？

4

1 に答える 1

0

関数の外部でインスタンス化されたグローバル変数を利用し、再帰呼び出しを停止するタイミングの論理条件として使用する必要があります。例えば：

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

クリックイベントで、を設定する必要がありますkeepAnimating = false;。これにより再帰が停止しますが、アニメーションを停止する必要がある場合もあります。

ただし、無限再帰は本当に悪い考えです。ブラウザが大量のメモリを使用するようになります。再帰の代わりにループを使用するようにコードを最適化する必要があります。

于 2012-12-05T15:37:42.927 に答える