Javascript - 试图延迟遍历 for 循环

Question

我试过在其他帖子中找到我的答案并且可以找到一些零碎的东西，但不是完整的答案。所以，很抱歉，如果这是一个重复的问题 - 据我所知，事实并非如此。

我正在努力完成三件事:

1. 在 itmes 之间延迟通过 for 循环迭代一秒钟
2. 在继续下一项之前将上一项恢复到其原始状态
3. 在最后一项之后重新开始循环

我已经完成了第一个，但不知道如何完成接下来的两个。

这是一个淡化后的代码示例:

HTML:

<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>
<p>Fourth paragraph.</p>
<p>Fifth paragraph.</p>
<p>Sixth paragraph.</p>
<p>Seventh paragraph.</p>
<p>Eighth paragraph.</p>
<p>Nineth paragraph.</p>
<p>Tenth paragraph.</p>

CSS:

p.red {color: red;}

JS:

function addRed() {
    var spans = $('p'),
        count = spans.length,
        delay = 1000;
    for(var i = 0; i <= count; i++) {
        (timer(i, spans, delay));
    } 
}

function timer(a, b, c) {
  setTimeout(function() {
    $(b[a]).toggleClass('red');
  }, c * a);
} (0);

addRed();

我想要第一个<p>在这个例子中变红，等待一秒，然后变红 <p>红色并将第一个恢复到其原始状态。然后，一旦循环完成(遍历整个 <p> 列表)，从顶部重新开始。 IE。;一个重复的循环。

抱歉，如果这是问三个不同的问题。将它们组合在一起更容易也更有意义。

这是我的 fiddle .

最后一点，我不受这些代码的约束。如果需要，我愿意更改它。

Answer 1

1. 对于点 #2，只需从所有 p 元素中删除 red 类，然后添加到当前
2. 对于点 #3，使用 index()检查这是否是最后一次超时并在一秒后重新开始

function addRed() {
  var spans = $('p'),
    count = spans.length,
    delay = 1000;
  for (var i = 0; i <= count; i++) {
    (timer(i, spans, delay));
  }
}

function timer(a, b, c) {
  setTimeout(function() {

    $('p').removeClass('red');
    $(b[a]).addClass('red');

    var currentIndex = $(b[a]).index();
    if (currentIndex == $('p').length) {
      setTimeout(function() {
        addRed();
      }, 1000);
    }
  }, c * a);
}(0);

addRed();

p.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<p>First paragraph.</p>
<p>Second paragraph.</p>
<p>Third paragraph.</p>