JavaScript 执行顺序

Question

我开始学习 Javascript 和 jQuery。我想用 jQuery 制作一个简单的幻灯片放映，它一个接一个地显示列表无序列表项。

我的代码在这里:on jsfiddle

我认为我可以通过在 for 循环中遍历列表项并使用如下所示的淡入淡出效果显示它们来制作幻灯片:

for(var i = 0; i < 3; i++)
{
    $('#slider li:nth-child('+ i +')')
        .fadeIn()
        .delay(1000)
        .fadeOut();
}

但它只显示列表中的最后一项。

我读到我需要在一个单独的函数中关闭 i 变量的值，因为它看到 i 的值正在增加到 2 的 Javascript 范围在循环。因此，我创建了一个单独的函数来关闭 i 的值并调用该函数。但还是一样，显示列表的最后一项。

所以，我只是想通过对列表项产生两个单独的效果来尝试不使用循环，如下所示:

$('#slider li:first-child')
    .fadeIn()
    .delay(1000)
    .fadeOut();
$('#slider li:nth-child(2)')
    .fadeIn()
    .delay(1000)
    .fadeOut();

但它不会像上面写的那样按顺序显示列表项。当您运行代码时，第一个项目似乎显示得非常快，最后一个项目按预期显示。

我把它写成 C 或 Java 代码，认为它会从上到下执行。但似乎 Javascript 是不同的，我不理解 Javascript 的一个关键概念。

所以，我的问题是为什么它不按顺序显示列表项而只显示最后一项，以及我需要知道什么才能使其按预期工作。

谢谢。

Answer 1

由于您的方法不起作用的原因已经涵盖，因此我设置了一个新的 fiddle。为您提供以下工作幻灯片代码和注释说明:

$('#slider li').hide();

// Method 3
var slideIt = function ( which ) {
    $('#slider li:nth-child('+ which +')')
        .fadeIn(300)
        .delay(1000)
        .fadeOut(300, function() { // after animation complete
            which++; // increment which child
            which = (which > $('#slider li').length) ?
                    1 : // if last child loop back to beginning
                    which;
            slideIt( which ); // call again with new child
        });
};

slideIt( 1 ); // start the process