调试过多的递归

Question

我想知道是否有人知道寻找解决此问题的好地方。我一直在研究一个简单的动画，它获取无序列表中的项目并通过它们淡入和淡出。

<div id="testimonialTitle">Customer Testimonials</div>
  <div id="testimonialQuote"></div>
  <div id="testimonialAuthor"></div>

  <!-- HIDDEN DIVS put your testimonials here-->
  <div id="testimonialList" style="display:none">
    <ul>
      <li>
        <div class="quote">"Integer posuere erat a ante venenatis d." </div>
        <div class="author">-Bob the Builder</div>
      </li>
      <li>
        <div class="quote">"Maecenas sed diam eget risus vari." </div>
        <div class="author">-Mr. T</div>
      </li>

和 js

$(document).ready(function(){
    animateDiv();
});

var myList = '#testimonialList ul li';
var speed = 'slow';
var duration = 8000;

function animateDiv() {
    $(myList).each(function(index) {
        var quote = $(this).find('.quote').text();
        var author = $(this).find('.author').text()

        setTimeout(function() {
            $('#testimonialQuote, #testimonialAuthor').fadeOut(speed, function() {
                $('#testimonialAuthor').text(author).fadeIn(speed);
                $('#testimonialQuote').text(quote).fadeIn(speed, function () {
                    if (($(myList).length) == index + 1) {
                        setTimeout(function() {
                            animateDiv();
                        }, duration)
                    }
                });
            });
        }, index * duration);
    });
}

由于某种原因，动画运行良好几次，然后，我松开引号，作者以大约 1 秒的间隔闪烁。 Firebug 告诉我“递归太多”。我知道我已经创建了一个无限循环，但当然我想要的是一个不断循环的动画。我无法理解如何调试此类错误以及在哪里可以找到有关此类事情的一些好的信息。

有什么建议吗？

Answer 1

我是个傻瓜，我已经回答了我自己的问题，但对于那些可以使用这里解决方案的人来说。

$(document).ready(function(){
    animateDiv();
    setInterval ('animateDiv()', duration * $(myList).length);
});

var myList = '#testimonialList ul li';
var speed = 'slow';
var duration = 3000;

function animateDiv() {
    $(myList).each(function(index) {
        var quote = $(this).find('.quote').text();
        var author = $(this).find('.author').text()
        setTimeout(function() {
            $('#testimonialQuote, #testimonialAuthor').fadeOut(speed, function() {
                $('#testimonialAuthor').text(author).fadeIn(speed);
                $('#testimonialQuote').text(quote).fadeIn(speed);
            });
        }, index * duration);
    });
}

我应该使用 setInterval 再次调用我的函数，而不是让我的函数调用本身。现在也干净了。我只是在开始时调用 animateDiv() 一次，然后根据列表中的元素数量乘以我设置的持续时间设置调用 animateDiv 的间隔。