javascript - $.each 函数未按预期工作

Question

最终，我尝试创建一个定时幻灯片放映，使图像淡入和淡出。我不明白的是为什么我的 $.each 函数确实完成了数组的每个索引的循环，而只循环最后一个图像七次。

这是我的代码...

<script>
$(document).ready(function(){
    var image1 = "<img width='600' height='400' src='images/image1.jpg' />";
    var image2 = "<img width='600' height='400' src='images/image2.jpg' />";
    var image3 = "<img width='600' height='400' src='images/image3.jpg' />";
    var image4 = "<img width='600' height='400' src='images/image4.jpg' />";
    var image5 = "<img width='600' height='400' src='images/image5.jpg' />";
    var image6 = "<img width='600' height='400' src='images/image6.jpg' />";
    var image7 = "<img width='600' height='400' src='images/image7.jpg' />";
    var image8 = "<img width='600' height='400' src='images/image8.jpg' />";

    var imageArray = new Array(image1, image2, image3, image4, image5, image6, image7, image8);
    $.each(imageArray, function(key, value){
        $('#slide').html(value);
        $('#slide').hide().fadeIn('slow').fadeOut('slow');
    });
});
</script>

同样，最终发生的情况是最后一个图像在消失之前淡入淡出 7 次。提前谢谢大家。

Answer 1

我认为你的问题是 JavaScript 执行在 fadeIn 和 fadeOut 执行任务时不会暂停。

您的每个调用都会执行以下操作:

1. 将 #slide 的 HTML 设置为 image1。
2. 隐藏#slide。
3. 在 #slide 中开始淡出。
4. 立即将 #slide 的 HTML 设置为 image2(因为它不会等待 fadeIn 完成)，覆盖 图片1。
5. 再次开始淡入#slide。

等等。

为了获得您想要的结果，您需要一个递归函数(即调用自身的函数)而不是 each 调用。此函数需要将回调函数传递给 fadeIn 和 fadeOut - 这些函数将在 fadeIn 和 fadeOut 时被调用已经执行完毕。

例如

function fadeImagesInAndOut(imageArray, imageIndex) {
    $('#slide').html( imageArray(imageIndex) );

    $('#slide').hide().fadeIn('slow', function () {

        $('#slide').fadeOut('slow', function () {

            if (imageIndex < imageArray.length) {
                fadeImagesInAndOut(imageArray, imageIndex + 1);
            }
        });
    });
}

fadeImagesInAndOut(imageArray, 0);