Javascript Jquery：数组中的最后一个图像重复两次，为什么？

在我的数组“bg”中，当函数“fadebg”到达最后一项/图像时，它会重复两次， 有人能回答我为什么会发生这种情况以及如何解决它吗

var bg = [];
bg[0] = "resources/images/bg/1.jpg";
bg[1] = "resources/images/bg/2.jpg";
bg[2] = "resources/images/bg/3.jpg";
bg[3] = "resources/images/bg/4.jpg";
bg[4] = "resources/images/bg/5.jpg";
bg[5] = "resources/images/bg/6.jpg";
bg[6] = "resources/images/bg/7.jpg";
bg[7] = "resources/images/bg/8.jpg";
bg[8] = "resources/images/bg/9.jpg";
bg[9] = "resources/images/bg/10.jpg";

var i = 0;

setInterval(fadebg, 10000);

function fadebg() {
    if (i < 10) {
        $('#bg').css({ opacity: 0 });
        setTimeout(function () {
            $('#bg').attr('src', bg[i]).css({ opacity: 1 })
        }, 300);
    };
    if (i == 10) {
        i = -1;
        $('#bg').css({ opacity: 0 });
        setTimeout(function () {
            $('#bg').attr('src', bg[i]).css({ opacity: 1 })
        }, 300);
        };
    i++;
};

var bg=[]；
bg[0]=“resources/images/bg/1.jpg”；
bg[1]=“resources/images/bg/2.jpg”；
bg[2]=“resources/images/bg/3.jpg”；
bg[3]=“resources/images/bg/4.jpg”；
bg[4]=“resources/images/bg/5.jpg”；
bg[5]=“resources/images/bg/6.jpg”；
bg[6]=“resources/images/bg/7.jpg”；
bg[7]=“resources/images/bg/8.jpg”；
bg[8]=“resources/images/bg/9.jpg”；
bg[9]=“resources/images/bg/10.jpg”；
var i=0；
设置间隔（fadebg，10000）；
函数fadebg（）{
如果（i<10）{
$（'#bg'）.css（{opacity:0}）；
setTimeout（函数（）{
$（'#bg'）.attr（'src'，bg[i]）.css（{opacity:1}）
}, 300);
};
如果（i==10）{
i=-1；
$（'#bg'）.css（{opacity:0}）；
setTimeout（函数（）{
$（'#bg'）.attr（'src'，bg[i]）.css（{opacity:1}）
}, 300);
};
i++；
};

---

顺便问一下，有人知道这个函数“fadebg”的较短版本吗？

这是因为您在

fadebg

中的函数关闭在变量

i

上，而不是它在创建函数时的值。它们使用运行时的值。这是典型的关闭错误。更多：

要使用函数创建时的值，必须使用

i

以外的其他值。我通常使用生成器函数：

function buildTheCallback(src) {
    return function () {
        $('#bg').attr('src', src).css({ opacity: 1 })
    };
}

…您可以这样使用：

setTimeout(buildTheCallback(bg[i]), 300);

现在，我们给出的函数

setTimeout

（这是调用

buildTheCallback

返回的函数）关闭了传递给它的

src

参数，该参数没有改变

---

我们是一个较短的版本，大致如下（未经测试嘿，你知道什么，[我将10000ms缩短为1000ms进行测试]：

（我假设图像的实际路径除了数字之外并不完全相同；如果是，可以将其显著缩短。）

但如果是我，我会淡出，而不是突然变为

opacity:0

/

opacity:1

：

---

您可能可以这样做，以使功能更小：

bg.each(function(i){
    $('#bg').css({opacity:0});
    setTimeout(function () {
        $('#bg').attr('src', bg[i]).css({ opacity: 1 })
    }, 300);
});

我还没有测试过，但可能需要进一步研究。

试试：

function fadebg() {
    if( i == 10 ){
      i = -1;
    }
    $('#bg').css({ opacity: 0 });
    setTimeout(function () {
      $('#bg').attr('src', bg[i]).css({ opacity: 1 })
    }, 300);
    i++;
};

---

下面是一个更简单的版本：

(function() {
    var bgIndex = 0;
    setInterval(function() {
        var item = $('#bg').css({ opacity: 0 });
        setTimeout(function() {
            item.attr("src", bg[++bgIndex % bg.length]);
        }, 300);
    }, 10000);
})();

它使用

%

技巧允许索引在数组中循环，而不会离开数组的边界

此外，这还解决了最初的问题，因为只有在使用索引时，索引变量才会正确递增，因此在变量递增和使用时，没有时间延迟问题

增强功能摘要：

使用

%bl.length

技巧简化代码以保持在数组边界内，并将两个代码分支折叠为一个分支

仅当我们即将使用数组索引时才增加它，所以当它增加时没有时间问题

包裹在IIFE中，因此没有全局变量。全局

i

是一种非常危险的做法。一行代码在

for（i=0；…）

循环中忘记了

var

，现在您的全局

i

受到打击

已保存的

$（'#bg'）

值，因此您不会在短时间后重新设置该值

---

为什么要使用这个

}；

在

if

的右大括号中？你可能只需要使用一个

.each（）

函数，而不是带有

i

的if语句，我以前从未见过有人像这样循环）直到它与.each（）函数看起来如何，你能发布它吗？

buildTheCallBack

应该在引号或匿名函数中，对吗？OP每十秒钟调用一次

fadebg

，我认为这里没有关闭问题，在调用

fadebg

之前应该调用超时回调。我错了吗？！但可以肯定的是，最好使用closure@A.Wolff：问题是在

fadeBg

中更新

i

，然后在300毫秒后使用它（在下属

setTimeout

函数中）。你能用buildTheCallback函数发布代码吗？@T.J.Crowder我想是因为太多人从MSDN中获取示例：谢谢！这对我很有用。：）var-bgi=0；setInterval（函数（）{var bgitem=$（'#bg'）；bgitem.css（{opacity:0}）；setTimeout（函数（）{bgitem.attr（“src”，bg[++bgi%bg.length]）；bgitem.css（{opacity:1}）}，300}，10000）；

function fadebg() {
    if( i == 10 ){
      i = -1;
    }
    $('#bg').css({ opacity: 0 });
    setTimeout(function () {
      $('#bg').attr('src', bg[i]).css({ opacity: 1 })
    }, 300);
    i++;
};

(function() {
    var bgIndex = 0;
    setInterval(function() {
        var item = $('#bg').css({ opacity: 0 });
        setTimeout(function() {
            item.attr("src", bg[++bgIndex % bg.length]);
        }, 300);
    }, 10000);
})();