Javascript 每当我返回窗口时，我的setInterval方法有问题

我正在使用setInterval方法为当前网站项目创建横幅幻灯片

横幅似乎很好用。jquery的过渡似乎很顺利，但我发现，当我转到另一个窗口选项卡，几分钟后返回到网站窗口时，幻灯片显示会中断其流程，并在不应该的时候开始淡出，在淡出完成之前开始加载图像，等等

这是浏览器问题吗？还是因为我使用了延迟方法？或者其他我看不见的东西

我的代码如下。非常感谢您花时间回复

HTML:

这可能是您的问题，也可能不是您的问题，但是您应该声明

var currentImage

，因为它当前在全局范围内，并且没有被垃圾收集，因此每5秒在后台运行一次可能会给您带来问题。编辑：看起来你已经修复了，所以无需担心：）

试试这个： （使用setinteral淡出上一张图像，然后在完成后淡入新图像）

---

尝试淡出setInterval函数中的图像，然后淡入新图像，而不是设置淡出延迟。

这可能是由于浏览器限制非活动的setInterval/setTimeout时出现了相对较新的功能选项卡：横幅中是否始终有图像？@ShadowCommander我不完全确定是否可以用100%确定，因为我是编程和web开发新手。我仍在努力了解幕后到底发生了什么。我只是在更改图像的src属性。所以在这个阶段，天气意味着图像总是在那里，这超出了我的知识范围。抱歉。您应该将其余的解决方案放入您的答案中，并添加来自JSFIDLE的相关代码，以防链接中断。

<section id="banner">

<div class="row">
<div class="col-md-12">

<img src="banner1.jpeg" class="img-responsive center-block banner-img">

</div>
</div>

</section>

$(document).ready(function(){

var bannerImages = [
"banner1.jpeg",
"banner2.jpg",
"banner3.png"
];

var currentImage = 0;

$(".banner-img").fadeIn(500).delay(5000).fadeOut();

// CHANGE THE BANNER IMAGE EVERY FEW SECONDS
setInterval(function(){
if (currentImage > bannerImages.length-1){
currentImage = 0;
}

$(".banner-img").fadeIn().attr("src",bannerImages[currentImage]).delay(5000).fadeOut();
currentImage++;
}, 6000)

})

$(document).ready(function(){

var bannerImages = [
"banner1.jpeg",
"banner2.jpeg",
"banner3.jpeg"
];

var currentImage = 0;
var $bannerimg = $(".banner-img");
$bannerimg.fadeIn(500);

// CHANGE THE BANNER IMAGE EVERY FEW SECONDS
setInterval(function(){

  if (currentImage > bannerImages.length-1){
  currentImage = 0;
  }

  $bannerimg.fadeOut("fast", function(){
    $bannerimg.fadeIn(500).attr("src",bannerImages[currentImage]);
    currentImage++;
  });

}, 6000);

});