jquery - 循环基本的 jquery 动画会导致“超出最大调用堆栈大小”

Question

我有以下简单的 jQuery 动画来为我的访问者创建一种加载栏：

    function animate() {
    $("#box").animate({width:"1000px"}, function() {
        $("#box").animate({left:"1000px"}, function() {
            $("#box").css('width', '100px');
            $("#box").css('left', '-110px');
        }); 
    });

    $("#box2").delay(500).animate({width:"1000px"}, function() {
        $("#box2").animate({left:"1000px"}, function() {
            $("#box2").css('width', '100px');
            $("#box2").css('left', '-110px');       
        }); 
    });
    animate();
    }

但是，每当我animate();再次使用最后一个函数运行它时，我都会收到此错误：

Uncaught RangeError: Maximum call stack size exceeded

为什么会这样？如何让上述动画正确循环？

谢谢

Answer 1

你在你的函数内部调用你 animate();的函数，所以它是一个无限循环并且非常快，所以内存已满Maximum call stack size exceeded。

在你的函数之外调用这个函数，如下所示： -

function animate() {
    $("#box").animate({
        width: "1000px"
    }, function () {
        $("#box").animate({
            left: "1000px"
        }, function () {
            $("#box").css('width', '100px');
            $("#box").css('left', '-110px');
        });
    });

    $("#box2").delay(500).animate({
        width: "1000px"
    }, function () {
        $("#box2").animate({
            left: "1000px"
        }, function () {
            $("#box2").css('width', '100px');
            $("#box2").css('left', '-110px');
        });
    });
}
animate();

如果你想多次调用它setInterval

setInterval(animate,2000);