延迟while循环功能答案

【问题标题】：Delay on while loop function延迟while循环功能
【发布时间】：2013-01-24 07:42:13
【问题描述】：

我尝试制作一个自动滑块，但我的代码似乎无法正常工作 - 它要么使浏览器崩溃，要么执行速度非常快。

我一直在玩的是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>

【问题讨论】：

您的 HTML 中没有 ID sliderwrapper。

标签： javascript jquery loops slider while-loop

【解决方案1】：

您可以使用 .delay("3000") 在 JQuery 命令之间放置暂停

【讨论】：

【解决方案2】：

我改变了几件事...

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 秒后消失.

【讨论】：

这应该可以解决问题。详细说明答案：OP，您的代码似乎不起作用，因为setTimeout 是异步的。 while循环不会等待setTimeout函数运行，而是直接设置所有超时时间，然后3秒后，所有超时时间几乎同时触发。
感谢 Cerbrus - 我可能应该提到 setTimeout 是非阻塞的。

【解决方案3】：

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

【讨论】：

啊，好吧。但是我需要暂停或恢复它，我只需要在函数调用上写一个 if 语句吗？
哦，对不起，我以为你会明白，因为我有一个 var playSlider = true;
@user2021893 没问题！ :) 从问题和问题解释中并不明显。看看我上面编辑的评论
非常感谢！我现在就去尝试实现它！
@user2021893 :) 不客气！愉快的编码，如果您遇到任何问题，请随时发表评论

【解决方案4】：

然后一点递归会帮助你：

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

【讨论】：

这导致浏览器崩溃：/