每当我返回到窗口时，我的setInterval方法就会出现问题

Question

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

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

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

我的代码如下。非常感谢您抽出时间来回应。

HTML：

<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>

JAVASCRIPT / JQUERY：

$(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)

})

Answer 1

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