CODEWITHSUNDEEP
javascriptjquery
ismaelw
ismaelw

Reputation: 341

jQuery Error - Maximum call stack size exceeded

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!

Upvotes: 0

Views: 3911

Answers (1)

Michael Coxon
Michael Coxon

Reputation: 5510

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.

Upvotes: 1

Related Questions