Question

我已经尝试在其他帖子中找到我的答案，可以找到点点滴滴，但不是完整的答案。所以，对不起，如果这是一个重复的问题 - 我能说的最好，但事实并非如此。

我正在努力完成三件事：

延迟在itmes之间迭代for循环一秒
将上一个项目恢复为原始状态，然后再转到下一个项目
在最后一项

我已经完成了第一次，但无法想象如何完成接下来的两次。

这是一个淡化的代码示例：

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> s列表），再次从顶部开始。即;重复循环。

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

这是我的fiddle。

作为最后一点，我并不依赖于任何此代码。如果需要，我愿意改变它。

Answer 1

对于第2点，只需从所有red元素中删除课程p，然后添加到当前
对于第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>

Answer 2

这可以通过更简洁的方式完成。

＆＃13;

(function addRed(elems, i, delay) {
    elems.eq(i).addClass("red");
    setTimeout(function() {
        elems.eq(i).removeClass("red");
        addRed(elems, ++i % elems.length, delay);
    }, delay);
})($("p"), 0, 1000);

＆＃13;

p.red {color: red;}

＆＃13;

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

＆＃13;

Answer 3

您可以使用间隔而不是像

那样的超时

var interval;

function addRed() {

  var $ps = $('p'),
    i = -1,
    count = $ps.length;;

  interval = setInterval(function() {
    $ps.eq(i).removeClass('red');
    i = ++i < count ? i : 0;
    $ps.eq(i).addClass('red');
  }, 500)
}


addRed();

p.red {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<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>

Answer 4

你很亲密。

我添加了2个条件。一个用于setTimeout函数以满足条件2，另一个用于for循环以满足条件3。

这是更新后的代码

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

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

addRed();

Javascript - 尝试延迟迭代循环

4 个答案: