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

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

1 个答案: