javascript - 淡入/淡出横幅

Question

我正在尝试在我的网站上创建淡入/淡出横幅。
我有一个 id 数组。我想遍历数组，从而在时间限制后首先显示并隐藏然后转到第二个数组以重复相同的过程。

我的代码....

$(Document).ready(function () {
var images = new Array();
images[0] = "#bannerImageOne";
images[1] = "#bannerImageTwo";
$('#homeCarousel img').hide();

for (var i in images) {
    setTimeout(fadeInOut(i, images), 5000);
    //alert(i);
}
});


function fadeInOut(i, images) {
$(images[i]).fadeIn("slow").delay(2000).fadeOut();
//alert(images[i]);
}

我的问题是只显示第一个横幅，而在警报中只显示第一个 id。这个问题有更好的解决方案吗？

谢谢....

Answer 1

概述

这个答案分为两部分:帮助您发布的实际代码，然后推荐另一种方法

帮助您发布的代码

这段代码:

for (var i in images) {
    setTimeout(fadeInOut(i, images), 5000);
    //alert(i);
}

...有一个主要问题和一个次要问题:

主要问题:你是 调用 fadeInOut函数并将其返回值传递给 setTimeout ，就像你其他任何时候一样 function1(function2(arg, arg2)); .相反，更改 setTimeout行至:

setTimeout(createFader(i, images), 5000);

...并添加 createFader看起来像这样的函数:

function createFader(index, array) {
    return function() {
        fadeInOut(index, array);
    };
}

createFader function 创建一个函数，调用时将调用 fadeInOut与您传递给它的参数。你 不能这样做:

setTimeout(function() {  // <== WRONG, WILL NOT WORK
    fadeInOut(i, images);
}, 5000);

...因为那里的匿名函数(它是一个闭包)将获得对 i 的持久引用和 images ，因此当超时发生时，它将使用它们当时的值，而不是创建函数时的值。更多:Closures are not complicated

(不要将字符串与 setTimeout 一起使用，正如另一个答案所建议的那样。)

for..in用于循环遍历对象的可枚举属性名称，不是 用于遍历数组索引。在琐碎的环境中，它主要是有效的，但它是一个坏习惯，将如果你不明白你在做什么，就咬你。更多信息:Myths and realities of for..in 如果您使用的是 jQuery，并且可以承受几个函数调用的开销， $.each 非常适合遍历数组(除了它不适合稀疏数组，但你的数组并不稀疏)。

另外，请注意 new Array()写得更好 [] ，实际上您可以将条目直接放在方括号中，而不是事后进行赋值。当然，它是 document (全部小写)，而不是 Document带有大写字母 D。

所以把这些放在一起:

$(document).ready(function () {
    var images = [
        "#bannerImageOne",
        "#bannerImageTwo"
    ];
    var i;

    $('#homeCarousel img').hide();

    for (i = 0; i < images.length; ++i) {
        setTimeout(createFader(i, images), 5000);
    }
});

function createFader(index, array) {
    return function() {
        fadeInOut(index, array);
    };
}

function fadeInOut(i, images) {
    $(images[i]).fadeIn("slow").delay(2000).fadeOut();
    //alert(images[i]);
}

另请注意，我移动了 i 的声明到函数的顶部，因为无论如何 JavaScript 引擎都会看到它(详情: Poor, misunderstood var )。

除非你有一个很好的理由 fadeInOut必须是一个全局函数，我会将它(和 createFader )移动到您传递给 ready 的函数中所以我们根本不创建全局符号。这也让他们都可以使用 images直接，所以我们不必传递数组引用(不是那很昂贵，它完全没问题)。看起来像这样:

$(document).ready(function () {
    var images = [
        "#bannerImageOne",
        "#bannerImageTwo"
    ];
    var i;

    $('#homeCarousel img').hide();

    for (i = 0; i < images.length; ++i) {
        setTimeout(createFader(i, images), 5000);
    }

    function createFader(index) {
        return function() {
            fadeInOut(index);
        };
    }

    function fadeInOut(i) {
        $(images[i]).fadeIn("slow").delay(2000).fadeOut();
        //alert(images[i]);
    }
});

它之所以有效，是因为通过将函数放在您传递给 ready 的匿名函数中，我们在调用该匿名函数的上下文中使它们闭包。 (请参阅上面关于闭包的链接。)即使在函数返回之后(它几乎立即返回)，上下文仍保存在内存中，并为我们的私有(private)数据提供了一个方便的容器。

推荐另一种方式

由于所有 setTimeout call 正在延迟 fadeIn 的开始5 秒后，如果使用 delay，代码会更简单。 (因为您已经必须在 fadeIn 和 fadeOut 之间暂停):

$(document).ready(function () {
    var images = [
        "#bannerImageOne",
        "#bannerImageTwo"
    ];

    $('#homeCarousel img').hide();

    $.each(images, function(index, id) {
        $(id).delay(5000).fadeIn("slow").delay(2000).fadeOut();
    });
});

或保留 fadeInOut作为一个单独的函数:

$(document).ready(function () {
    var images = [
        "#bannerImageOne",
        "#bannerImageTwo"
    ];

    $('#homeCarousel img').hide();

    $.each(images, function(index, id) {
        fadeInOut(id, 5000);
    });

    function fadeInOut(id, delay) {
        $(id).delay(delay).fadeIn("slow").delay(2000).fadeOut();
    }
});

delay代替 setTimeout并且所有图像在 5 秒后开始淡入淡出。 (我还提供了一个使用 $.each 遍历数组的示例。)如果您希望它们按顺序淡入，您可以将延迟乘以 index。 :

$.each(images, function(index, id) {
    $(id).delay(5000 * (index + 1)).fadeIn("slow").delay(2000).fadeOut();
});

或者

$.each(images, function(index, id) {
    fadeInOut(id, 5000 * (index + 1));
});

...这将使第一张图像延迟 5 秒，第二张图像延迟 10 秒，以此类推。