Question

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

  $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.

Answer 1

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.