变量重新分配问题在JS,刹车我的头试图理解

variable reassignment problem in JS, braking my head trying to understand

本文关键字:我的 刹车 JS 新分配 分配 问题 变量      更新时间:2023-09-26

我正在构建自己的自定义图像幻灯片,下面是到目前为止的代码:

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保持与第一次触发时相同的值。你能告诉我我做错了什么吗?我也试着把变量放在函数外面,给我同样的结果。

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

你应该把currentImage放到一个更大的作用域中,并在函数slideSwitch之外赋值

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

顺便说一下,下面的代码块:

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

可以简化为

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

这是因为每次调用它时都在方法内部重新声明var currentImage = 0;

要么使用jQuery的.data() api将其存储在相关的DOM元素中,要么在方法

之外声明它
var currentImage = 0; 
function slideSwitch() {
  //code
}

将currentImage从slideSwitch函数中拉出,它应该可以正常工作。您的间隔正在调用:

var currentImage = 0;

在这里重置它