Debugging too much recursion

I was wondering if anyone knows of good place to look for the solution to this problem. I've been working on a simple animation that takes items in an unordered list and fades in and out through them.

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

and js

$(document).开发者_JAVA技巧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);
    });
}

for some reason the animation runs fine a couple times then, I loose the quotes and the authors flash on approximately 1 second intervals. Firebug tells me "too much recursion". I know I've created an infinite loop but of course what I wanted was an animation that would continually loop. I'm having trouble understanding how to debug this sort of error and where to find some good info on this sort of thing.

Any Suggestions?

---

I'm a fool, I've answered my own question, but for those of you that could use the solution here it is.

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

I should have been using setInterval to call my function again instead of calling having my function call itself. Cleaner too now. I just called animateDiv() once at the beginning, then set the interval to call animateDiv depending on the number of elements in my list multiplied by the duration that i set.