jQuery - Uncaught RangeError: Maximum call stack size exceeded

Question

The following code (see Fiddle here) throws the stack overflow referred to in the question title. I'm trying to get a box shadow to display around a circular image in a pulse effect. Can anyone point out the recursion, please? I'm very much a Javascript novice and can't see it. Thank you.

HTML

<div id="pulseDiv"> 
      <a href="#" id="advisers-css-image">
           <div id="advisersDiv"><img src="http://ubuntuone.com/1djVfYlV62ORxB8gSSA4R4"></div>
      </a>
</div>

CSS

.pulse { box-shadow: 0px 0px 4px 4px #AEA79F; }

Javascript

function fadeIn() {
   $('#pulseDiv').find('div.advisersDiv').delay(400).addClass("pulse");
   fadeOut();
};

function fadeOut() {
   $('#pulseDiv').find('div.advisersDiv').delay(400).removeClass("pulse");
   fadeIn();
};

You have two functions that recursively call each other with no delay. — user400654
– user400654, Commented May 22, 2013 at 14:19
Got it, thanks Kevin B - see also PSL's answer which caters for the delay. — Clive van Hilten
– Clive van Hilten, Commented May 22, 2013 at 14:35

Community · Accepted Answer · 2020-06-20 09:12:55Z

40

Your calls are made recursively which pushes functions on to the stack infinitely that causes max call stack exceeded error due to recursive behavior. Instead try using setTimeout which is a callback.

Also based on your markup your selector is wrong. it should be #advisersDiv

Demo

function fadeIn() {
    $('#pulseDiv').find('div#advisersDiv').delay(400).addClass("pulse");
    setTimeout(fadeOut,1); //<-- Provide any delay here
};

function fadeOut() {
    $('#pulseDiv').find('div#advisersDiv').delay(400).removeClass("pulse");
    setTimeout(fadeIn,1);//<-- Provide any delay here
};
fadeIn();

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 22, 2013 at 14:25

PSL

124k21 gold badges257 silver badges243 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Clive van Hilten Over a year ago

Thanks very much PSL, both for a correct answer and also for pointing out my mistake with the selector identifier.

Musakkhir Sayyed · Accepted Answer · 2017-09-18 10:32:12Z

3

your fadeIn() function calls the fadeOut() function, which calls the fadeIn() function again. the recursion is in the JS.

edited Sep 18, 2017 at 10:32

Musakkhir Sayyed

7,21813 gold badges44 silver badges67 bronze badges

answered Feb 9, 2016 at 21:13

Duan Walker

3151 silver badge11 bronze badges

Collectives™ on Stack Overflow

jQuery - Uncaught RangeError: Maximum call stack size exceeded

2 Answers 2

Demo

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related