while while循環功能的延遲

Question

我試過做一個自動滑塊，雖然它看起來我的代碼不工作 - 它或者崩潰瀏覽器或者它執行得非常快。

我一直在玩的是setTimeout，但它似乎並沒有在while循環中工作。

var playSlider = true; 

if(playSlider) { 
    var i = $('#sliderwrapper ul li:visible').attr('data-number'); 
    var lengthLi = $('#sliderwrapper ul li').size(); 
    while(i<=lengthLi) { 
     var x = i + 1; 
     setTimeout(function(){ 
      $('#sliderwrapper ul li[data-number=' + i + ']').fadeOut(450); 
      $('#sliderwrapper ul li[data-number=' + x + ']').fadeIn(600); 
     }, 3000); 
     i++; 
    } 
} 

HTML：

<ul> 
    <li data-number="1" data-description="Buy now!"><img src="images/slider1.png" border="0"></li> 
    <li data-number="2" data-description="Buy later!"><img src="images/slider2.png" border="0"></li> 
    <li data-number="3"><img src="images/slider3.png" border="0"></li> 
    <li data-number="4"><img src="images/slider4.png" border="0"></li> 
    <li data-number="5"><img src="images/slider5.png" border="0"></li> 
    <li data-number="6"><img src="images/slider2.png" border="0"></li> 
    <li data-number="7"><img src="images/slider3.png" border="0"></li> 
    <li data-number="8"><img src="images/slider5.png" border="0"></li> 
    <li data-number="9"><img src="images/slider1.png" border="0"></li> 
</ul> 

Answer 1

LIVE DEMO

var $li = $('#sliderwrapper ul li'); 
var N = $li.length; 
var C = 0 ; 
var intv ; 

$li.hide().eq(C).show(); 

function loop(){ 
    intv = setInterval(function(){ 
    $li.eq(++C % N).fadeTo(500,1).siblings().fadeTo(500,0); 
    },3000); 
} 
loop(); 

$('#sliderwrapper').on('mouseenter mouseleave', function(e){  
    var mEnt = e.type=='mouseenter' ? clearInterval(intv) : loop() ;  
}); 

Answer 2

可以使用.delay（ 「3000」）把暫停JQuery的命令之間

Answer 3

然後有點遞歸將幫助您：

function rec(){ 
    //your code and so on 
    setTimeout(function(){ 
     rec(); 
    },3000); 
} 

Answer 4

我改變了一些東西...

var playSlider = true; 
if(playSlider) { 
    var i = $('#sliderwrapper ul li:visible').attr('data-number'); 
    var lengthLi = $('#sliderwrapper ul li').length(); 
    while(i <= lengthLi) { 
     var x = i + 1; 
     setTimeout(function(){ 
      $('#sliderwrapper ul li[data-number=' + i + ']').fadeOut(450); 
      $('#sliderwrapper ul li[data-number=' + x + ']').fadeIn(600); 
     }, 3000 * i); 
     i++; 
    } 
} 

我將.size()更改爲.length()來計算li元素（大小已過時），並且我將超時更改爲3000 * i，否則它們將全部淡出並在3秒後同時出現。