递归函数填充堆栈

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

//当你想完成"摇摆"，你只需要设置"继续"变量为假，例如

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

所以重点是你需要一些东西（一个标志），告诉"摆动"方法停止。在这种情况下，标志将是"continue"变量，当您需要时，它将从"true"变为"false"。