递归函数填充栈

Question

我有我创建了一个摆动的动画功能，但是在某一点上，我要摧毁在堆栈绑定动画，但我这样做的时候，我收到一个错误：

Uncaught RangeError: Maximum call stack size exceeded

这显然是因为我填补了整个堆栈，但我不知道是否有更好的方法来执行下面的动画，但仍给人以光滑的方式来阻止它，当我想要什么？

function wobble(targetElement, speed, distance) { 
    targetElement.animate({ marginLeft: "+=" + distance}, { 
     complete: function() {    
      targetElement.animate({ marginLeft: "-=" + distance}, { 
       complete: function() { 
        wobble(targetElement, speed, distance, status); 
       } 
      }); 
     } 
    }); 
} 

我用finish()杀队列和停止动画，我这是怎么得到这个错误。

Answer 1

我没有测试的代码，但你可以尝试这样的事：

var count=0; 
    function wobble(targetElement, speed, distance,count) { 
     if (count < 50){ 
      targetElement.animate({ marginLeft: "+=" + distance}, { 
       complete: wobble (targetElement, speed, distance,count++); 
      } 
     } 
    }); 

解决方法二（没有测试的代码）

var continue=true; 
function wobble(targetElement, speed, distance) { 
    if (continue){ 
     targetElement.animate({ marginLeft: "+=" + distance}, { 
      complete: wobble (targetElement, speed, distance); 
     }); 
    } 
}; 

//当你要完成“摆动”你只需要将“continue”变量设置为false，例如

$('button.stop').on('click',function(){ 
     console.log("wobbling stopped"); 
     continue=false; 
}); 

所以主要的观点是：你需要什么东西（一个标志），告诉“摆动”方法到停止。在这种情况下，标志将是“继续”变量，当你需要时它将从“真”变为“假”。