Jquery：停止递归与事件

Question

我以递归方式动画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; 
    } 

动画作品，但也许需要以另一种方式来实现停止递归。

一个想法？

Answer 1

你应该使用一个在你的函数外实例化的全局变量，并将它用作递归调用停止时的逻辑条件。例如：

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;。这将停止递归，但您可能还需要停止动画。

然而，无限递归是一个非常糟糕的主意。您将导致浏览器使用大量内存。你应该优化你的代码来使用循环而不是递归。