Question

我知道有很多问题，这个jQuery Error是问题所在。但是你怎么看，这个错误对解决这个问题根本没有帮助。我使用的是jQuery 1.10.2，并且在1.3版本中有一个名为jRumble的插件。

现在这个脚本出现了错误：

jQuery(document).ready(function() {
    jQuery('.landing-bar').jrumble({
        x: 1,
        y: 1,
        rotation: 0
    });

    var rumbleStart = function() {
        jQuery('.landing-bar').trigger('startRumble');
        setTimeout(rumbleStop, 200);
    };

    var rumbleStop = function() {
        jQuery('.landing-bar').trigger('stopRumble');
        setTimeout(rumbleStart, 785);
    };

    rumbleStart();
    animateScroll();
}); 

function animateScroll() {
    jQuery('.landing-bar').animate({
        width: '100%'
    }, {
        duration: 30000,
        easing: 'linear',
        complete:function() { 
            jQuery(this).css("width","0%");
        }
    });
    animateScroll();
}

我的代码出了什么问题？我认为可能是jQuery 1.10的语法错误。

感谢您的帮助！

Answer 1

将animateScoll()放入complete回调中。你不希望像那样一遍又一遍地调用它。

function animateScroll() {
    jQuery('.landing-bar').animate({
        width: '100%'
    }, {
        duration: 30000,
        easing: 'linear',
        complete:function() { 
            jQuery(this).css("width","0%");
            animateScroll();
        }
    });

}

说明：

在动画制作完成后调用jQuery回调complete。你实际上在做的是一遍又一遍地调用animate函数（在前一次调用的几毫秒内）并用一个永不结束的递归函数填充解释器堆栈。

Stack看起来像：

animateScroll()
animateScroll()
animateScroll()
animateScroll()
animateScroll()
...

您需要的是：

animateScroll()
animateScroll()
complete:function()
animateScroll()
complete:function()
animateScroll()
complete:function()
animateScroll()
...

以便在调用新步骤之前完成每个步骤。

jQuery错误 - 超出最大调用堆栈大小

1 个答案: