javascript - JS 中的变量重新分配问题，让我无法理解

Question

我正在构建我自己的定制图像幻灯片，这是到目前为止的代码:

function slideSwitch() {
    var images = new Array('Aerodynamics.jpg','ABC_news.jpg','yep.jpg');
    var currentImage = 0; 
    var newImage = 'url(images/'+images[currentImage]+')';    
    $('.inner_img').css('background-image',newImage).animate({opacity:1.0},4000,function(){
        if (currentImage != images.length-1){
            currentImage++;
        } else {
            currentImage = 0;
        };
        $(this).animate({opacity:0.0},4000);
    });
};

function interval(){
    setInterval(slideSwitch,1000);
};

interval();

问题是，当 interval 再次触发 slideSwitch() 函数时，变量 newImage 保持与第一次触发时相同的值。你能告诉我我做错了什么吗？我还尝试将变量放在函数之外，结果相同。

Answer 1

每次调用该函数时，bc currentImage 都被赋值为零。

你应该把 currentImage 放到一个更大的范围内，并在函数 slideSwitch 之外进行赋值

var currentImage = 0;

function slideSwitch()
{
    //same thing, but lose the line: var currentImage = 0
}

function interval()
{
    //unchanged
}

interval();

顺便说一下，下面的 block :

if (currentImage != images.length-1){
     currentImage++;
 }
else{
     currentImage = 0;
 }; 

可以简化为

currentImage = (currentImage + 1) % images.length;