Question

正如所料，以下jquery函数

$(document).ready(function animate1(){

    var div = $("#circle"); 
    var xcor,ycor;
    xcor = Math.random()*100; ycor=Math.random()*100;

    div.animate({left: xcor, top:ycor}, "slow", animate1());
});

会导致堆栈溢出但是怎么了以下功能不会？

$(document).ready(function animate1(){

    var div = $("#circle"); 
    var xcor,ycor;
    xcor = Math.random()*100; ycor=Math.random()*100;

    div.animate({left: xcor, top:ycor}, "slow", function () {animate1();});
});

Answer 1

在第一种情况下，您在调用animate1()的过程中执行div.animate。这是造成溢出的原因。在第二种情况下，你不是;完成功能仅在动画完成后调用animate1()。在第一种情况下，您可以尝试使用animate1而不是animate1()作为完成参数。

div.animate({left: xcor, top:ycor}, "slow", animate1);

Answer 2

div.animate({left: xcor, top:ycor}, "slow", animate1());

您正在立即调用animate1而不是为动画提供动画参考。这意味着逻辑将启动一个非常快速的无限递归循环，而不释放以前获得的资源。

div.animate({left: xcor, top:ycor}, "slow", function () {animate1();});

这个回调不会导致立即调用，并且会释放资源。

为什么这两个看似相同的实现都会导致溢出？

2 个答案: