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

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

递归函数填充堆栈

1 个答案: