Javascript - 尝试延迟循环迭代

Question

我试过在其他帖子中找到我的答案，并且可以找到点点滴滴，但不是完整的答案。所以，如果这是一个重复的问题，那么很抱歉 - 最好我可以告诉，事实并非如此。

我试图完成三两件事：

1. 延迟通过一个for循环迭代的itmes
2. 上移动到下一个项目之前还原以前的项目到原来的状态之间1秒
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> s），再次从顶部开始。即;一个重复的循环。

对不起，如果这是问三个单独的问题。将它们组合在一起会更容易，更合理。

这是我的fiddle。

作为最后一点，我没有被绑定到任何此代码。如果需要，我愿意改变它。

Answer 1

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

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

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>

Answer 2

1. 对于点＃2，简单地从所有p元素删除类red，然后添加到当前
2. 对于点＃3，使用index()检查，如果这是最后超时和启动结束后再次1秒

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