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

【问题标题】：jQuery Error - Maximum call stack size exceededjQuery 错误 - 超出最大调用堆栈大小
【发布时间】：2014-02-16 23:42:48
【问题描述】：

我知道这个 jQuery 错误是问题所在。但是您可能会看到，此错误对于解决问题根本没有多大帮助。我使用 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 的语法错误..

感谢您的帮助！

【问题讨论】：

你在animateScroll中发生了一个无限递归......你为什么在animateScroll里面调用animateScroll
你有这个小提琴吗？抛出错误时调用的是什么方法？
使用setTimeout(animateScroll,30000)而不是直接调用animateScroll，或者最好在动画完成回调中调用animateScroll()
@ArunPJohny 必须是这样。它是一个加载栏，当它达到 100% 时应该开始宽度为 100% .. 我不能那样做吗？
@ArunPJohny 能够一次又一次地启动整个“增长到 100%”的过程

标签： javascript jquery

【解决方案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 函数（在上一次调用的几毫秒内），并用一个永不结束的递归函数填充解释器堆栈。

堆栈看起来像：

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

你需要的是：

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

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

【讨论】：