Проблема "слишком много рекурсии"

Question

Я помогаю компании разработать веб-сайт, использующий jquery, но я заметил, что сайт замедляется до полной остановки из-за ошибки jquery «Too Much Recursion».Компании действительно нужно решить эту проблему, но сохранить возможности слайд-шоу, как они есть сейчас.Вот код вопроса:

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

Вот адрес сайта: http://dbunderdevelopment.com/CRR/

Если у кого-то есть какие-либо предложения, я был бы очень признателен.

PSЯ уже публиковал этот вопрос как незарегистрированный пользователь, и я заранее извиняюсь за это.Я не могу найти сообщение для удаления, но, будьте уверены, это больше не повторится.Я знаю, насколько плохи репосты на форумах.

Answer 1

Мне кажется, cycle_slideshow_image вызывает себя три раза при каждом вызове ... измените его на:

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

}

Кроме того, cycle_top_bubble первоначально вызывается дважды, поэтому он выполняется в два цикла. удалить эту строку:

var initialTestimonialDelay = setTimeout(cycle_top_bubble, 3000);

Еще одна вещь, которую следует учитывать, это то, что когда ваша страница становится неактивной вкладкой в ​​браузере, тайм-ауты ограничиваются 1000 мс ( ref ), поэтому анимация может нарастать, если у вас слишком короткие тайм-ауты, что нет, но об этом нужно помнить.

Answer 2

Так что вам нужно подумать о том, как работает рекурсия, когда вы выполняете рекурсию в этих установленных функциях тайм-аута, вы создаете новую область внутри рекурсивной функции, добавляя все в стек без отрыва последней функции.

Если вы посмотрите на это как на блок памяти, но вы никогда не вернетесь, что является возвратным резервным копированием, вы продолжите заполнять память все большим и большим количеством объектов, пока она не заполнится. Как вы можете решить это довольно легко.

Первая рекурсия - неправильный подход к чему-то, что никогда не завершается, я объяснил почему выше. Рекурсия должна быть изменена. Решение, которое я бы использовал, - это обратный вызов в setTimeout, но переместите setTimeouts за пределы вызывающей функции. Это должно помочь с проблемой памяти.

Другие предложения - использовать реальный плагин для слайд-шоу, который кто-то написал ... Я знаю, что это может вызывать недовольство, но зачем воссоздавать колесо, если это было сделано 1000 раз. Я рекомендую jQuery Cycle , он очень быстрый и настраиваемый.

Удачи!