jQuery - Uncaught RangeError: Maximum call stack size exceeded
113,856
Solution 1
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();
Solution 2
your fadeIn()
function calls the fadeOut()
function, which calls the fadeIn()
function again. the recursion is in the JS.
Related videos on Youtube
Author by
Clive van Hilten
Updated on September 19, 2020Comments
-
Clive van Hilten over 3 years
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(); };
-
Kevin B almost 11 yearsYou have two functions that recursively call each other with no delay.
-
Clive van Hilten almost 11 yearsGot it, thanks Kevin B - see also PSL's answer which caters for the delay.
-
-
Clive van Hilten almost 11 yearsThanks very much PSL, both for a correct answer and also for pointing out my mistake with the selector identifier.