Question

我正在帮助一家公司开发一个利用jquery的网站，但我注意到该网站因为“太多递归”错误而减速到完全停止。该公司确实需要解决此问题，但保留现在的幻灯片功能。以下是有问题的代码：

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

如果有人有任何建议，我将不胜感激。

P.S。我之前发过这个问题作为未注册的用户，我真诚地为此道歉。我似乎无法找到帖子以便删除但是，请放心，它不会再发生。我知道论坛上的重新发布有多糟糕。

Answer 1

所以你需要考虑递归是如何工作的，当你在那些设置超时函数中进行递归时，你会在递归函数中创建一个新的作用域，将所有内容添加到堆栈中而不会弹出最后一个函数。

如果你看这个，因为它是一块内存，但是你永远不会递归回来的东西，你继续用越来越多的对象充满内存直到它满了。如何解决这个问题非常简单。

对于永远不会完成的事情，第一次递归是错误的方法，我在上面解释了原因。递归需要改变。我将使用的解决方案是在setTimeout上进行回调，但将setTimeouts移到调用函数的范围之外。这应该有助于解决内存问题。

其他建议是使用其他人写的真实幻灯片插件...我知道这可能不赞成但为什么在完成1000次后重新创建轮子。我建议jQuery Cycle它非常快且可以自定义。

祝你好运！

Answer 2

对我而言，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），因此如果您的超时时间太短，动画可能会累积但是，这是要记住的事情。

“太多的递归”问题

2 个答案: