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秒后同时出现。