2011-02-12 65 views
0

我有一个脚本,通过一堆列表项循环;添加/删除每个人。现在它只是无休止地循环,我怎么能改变这个脚本,以便它在到达最后一个列表项时停止?停止setTimeout循环当它到达列表结尾

http://jsfiddle.net/bizarroZ/YyDjW/

<style type="text/css" media="screen"> 
li {display:none;} .go {color:green;display:block} 
</style> 

<ul> 
<li>First Slide</li> 
<li>Second Slide</li> 
<li>Third Slide</li> 
<li>Fourth Slide</li> 
<li>Fifth Slide</li> 
<li>Sixth Slide</li> 
</ul> 

<a href="#" class="go-button">GO!</a> 

<script type="text/javascript" charset="utf-8"> 

$(".go-button").click(function() { 

$("li:nth-of-type(1)").addClass("go"); 

var index = 0; 
var length = $("ul").children().length; 
var delays = [ 
     1000, 
     1500, 
     2000, 
     2500, 
     3000, 
     15000 
     ]; 

function delayNext() 
{ 
    setTimeout(function() { 
    $("ul li:eq(" + index + ")").addClass("go").siblings().removeClass("go"); 
     index++; 

     if (index == length) 
      index = 0; 

      delayNext(); 
     }, delays[index]); 
    } 

    delayNext(); 
}); 
</script> 
+0

你不是已经问一个相同的问题吗? – 2011-02-12 23:30:42

+0

修复你的代码的格式,你应该看到* *的问题是什么。 – 2011-02-12 23:36:44

回答

1

你可以简单地在一个循环增加6个setTimeout电话这样的替代:

var li = $('ul li'), 
    delays = [1000,1500,2000,2500,3000,15000]; 

function sumPrev(array, index){ 
    var sum = 0; 
    for(var i = 0; i < index; i++){ 
     sum += array[i]; 
    } 
    return sum; 
} 

li.each(function(i){ 
    setTimeout(function($ele){ 
     $ele.addClass("go").siblings().removeClass("go"); 
    }, sumPrev(delays, i), $(this)); 
}); 

参见:http://jsfiddle.net/V5mRv/1/

1

具有指标检查==长度刚好delayNext(内)并立即返回,而不是调用的setTimeout应该这样做的。

function delayNext() 
{ 
    if (index == length) 
     return; 
    setTimeout(function() { 
     $("ul li:eq(" + index + ")").addClass("go").siblings().removeClass("go"); 
     index++; 

     delayNext(); 
    }, delays[index]); 
}