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的时间间隔。

调试过多的递归

1 个答案: