"Too Much Recursion" Problem

I'm helping a company develop a website that utilizes jquery but I have noticed that the site slows to a complete halt with a jquery "Too Much Recursion" error. The company really needs to get this resolved but retain the slideshow capabilities as they are right now. Here is the code in question:

<script type="text/javascript">
var $testimonialCont;
var $slideshowContainer;
$(document).ready(function(){
  $slideshowContainer = $('.slideshowContainer');
  var inititalSlideshowDelay = setTimeout(cycle_slideshow_image, 4000);

 开发者_StackOverflow $testimonialCont = $('.testimonialContainer');
  $('.testimonialBubble').hide();
  $('.testimonialBubble').removeClass('hide');
  cycle_top_bubble()
  var initialTestimonialDelay = setTimeout(cycle_top_bubble, 3000);
});

function cycle_slideshow_image(){

  //This code cycles the slideshow caption headings and body text
  $('h1.slideshowCaptionHeading:last').fadeOut(1500, function(){
    $(this).prependTo('.captionHeaderArea');
    $(this).show(1);
     var delay = setTimeout(cycle_slideshow_image, 4000);
   });
  $('p.slideshowCaptionBody:last').fadeOut(1500, function(){
    $(this).prependTo('.captionBodyArea');
    $(this).show(1);
    var delay = setTimeout(cycle_slideshow_image, 4000);
  });

  $('img.slideshowSlide:last').fadeOut(1500, function(){
    $(this).prependTo($slideshowContainer);
    $(this).show(1);
    var delay = setTimeout(cycle_slideshow_image, 4000);
  });

}

function cycle_top_bubble(){
  $('.testimonialBubble:last').prependTo($testimonialCont).fadeIn(1500, function(){
    var $this = $(this);
    var thisTimer = setTimeout(function(){
      $this.fadeOut(1500, function(){        
        var thisDelay = setTimeout(cycle_top_bubble, 3000);
      })
    }, 5000);
  });
}
</script>

Here is the site's address: http://dbunderdevelopment.com/CRR/

If anyone has any suggestions, I would greatly appreciate it.

P.S. I did post this question before as an unregistered user and I sincerely apologize in advance for that. I can't seem to find the post in order to delete but, rest assured, it will not happen again. I know how bad repostings are on forums.

---

To me it looks like cycle_slideshow_image calls itself three times each time it is called... change it to this:

function cycle_slideshow_image(){

  //This code cycles the slideshow caption headings and body text
  $('h1.slideshowCaptionHeading:last').fadeOut(1500, function(){
    $(this).prependTo('.captionHeaderArea');
    $(this).show(1);
   });
  $('p.slideshowCaptionBody:last').fadeOut(1500, function(){
    $(this).prependTo('.captionBodyArea');
    $(this).show(1);

  });
  $('img.slideshowSlide:last').fadeOut(1500, function(){
    $(this).prependTo($slideshowContainer);
    $(this).show(1);
    var delay = setTimeout(cycle_slideshow_image, 4000);
  });

}

Also, cycle_top_bubble is being called twice initially, so it's running in two loops. remove this line:

var initialTestimonialDelay = setTimeout(cycle_top_bubble, 3000);

Another thing to consider is that when your page becomes an inactive tab in the browser, the timeouts are clamped to 1000ms (ref) so the animation may build up if you have the timeouts too short, which you don't, but it's something to keep in mind.

---

So you need to think about how recursion works, when you recurse in those set timeout functions you create a new scope inside the recursed function, Adding everything onto the stack without popping off the last function.

If you look at this as it is a block of memory but you never recurse which is the returning back up you continue to flood memory with more and more objects until its full. How you can solve this is pretty easy.

First recursion is the wrong approach for something that never completes, I explained why above. The recursion needs to be changed. The solution I would use is have a callback on the setTimeout but move your setTimeouts outside the scope of the calling function. This should help with the memory problem.

Other suggestions is to use a real slideshow plugin that someone else wrote... I know this may be frowned upon but why recreate the wheel when it has been done 1000 times. I recommend jQuery Cycle it is extremely fast and customizable.

Good luck!