淡入/淡出横幅

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

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

1. 主要的问题:你打电话的fadeInOut功能,并通过其返回值到setTimeout,就像你做其他任何时间function1(function2(arg, arg2));.而是将setTimeout行更改为:

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

   ...并添加一个如下所示的createFader函数:

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

   该createFader函数创建一个函数,在调用时,将fadeInOut使用您传入其中的参数进行调用.你不能这样做:

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

   ......因为匿名函数存在(这是一个闭合)将获得一个持久的引用来i和images,因此在发生超时时,它会使用任何他们的价值观,然后,当你创建的函数不是他们.更多:关闭并不复杂

   (不要使用字符串setTimeout作为另一个答案建议建议.)

2. for..in用于循环遍历对象的可枚举属性名称,而不是循环遍历数组索引.在琐碎的环境中,它主要起作用,但如果你不完全明白自己在做什么,那么这种习惯就会咬你.更多这里:神话和现实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引擎无论如何都会看到的(细节:很差,被误解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,我们在对匿名函数的调用上下文中进行闭包.(请参阅上面关于闭包的链接.)即使在函数返回后(它几乎立即执行),上下文仍保留在内存中,并为我们的私有数据提供了一个方便的容器.

推荐另一种方式

由于setTimeout调用所做的一切都是延迟fadeIn5秒的开始,所以如果使用代码可以更简单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秒后淡入.(我还举了一个使用$.eachlop通过数组的例子.)如果你想让它们按顺序淡入,你可以通过以下方式多次延迟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秒等