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

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

Answer 2

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