jQuery Error - Maximum call stack size exceeded

Question

I know there are many questions where this jQuery Error was the problem. But how you may see, this error isn't very helpful at all for solving the problem. I work with jQuery 1.10.2 and have a plugin at version 1.3 called jRumble included.

Now the error comes with this script:

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

What is wrong with my code? I think it could be, that a syntax is wrong for jQuery 1.10..

Thanks for any help!

you have an infinite recursion happening in animateScroll.... why are you calling animateScroll inside animateScroll — Arun P Johny
– Arun P Johny, Commented Feb 16, 2014 at 15:36
Do you have a fiddle for this? What method is being called when the error is thrown? — reergymerej
– reergymerej, Commented Feb 16, 2014 at 15:37
use setTimeout(animateScroll,30000) instead of directly calling animateScroll, or better yet call animateScroll() within the animate done callback — Patrick Evans
– Patrick Evans, Commented Feb 16, 2014 at 15:38
@ArunPJohny that has to be like that. It is a Loadingbar which should start going to 100% in width when it reached the 100%.. am I not allowed to do it like that? — ismaelw
– ismaelw, Commented Feb 16, 2014 at 15:38
@ArunPJohny to be able to start the whole "growing to 100%" process again and again — ismaelw
– ismaelw, Commented Feb 16, 2014 at 15:40

Michael Coxon · Accepted Answer · 2014-02-16 15:42:48Z

Put animateScoll() in your complete callback. You don't want it to be called over and over again like that.

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

}

EXPLANATION:

the jQuery callback complete is called when your animating has finished. What you are essentially doing is calling the animate function over and over again (within milliseconds of the previous call) and filling the interpreter stack with a recursive function that never ends.

Stack would look like:

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

What you need is:

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

so that each step completes before a new one is called.

Collectives™ on Stack Overflow

jQuery Error - Maximum call stack size exceeded

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related