JavaScript-浏览器选项卡切换的间隔问题

我有一个简单的脚本，可以淡入淡出一些图像。在我切换到另一个选项卡然后切换回之前，它工作得非常好。切换回后，运行动画的间隔似乎不会被清除，并且

animateFading

函数将继续运行

为什么会发生这种情况，制表符切换如何影响脚本？我怎样才能使它正常工作？谢谢

真正的代码：

var img0 = document.getElementById("image0");
var img1 = document.getElementById("image1");
var img2 = document.getElementById("image2");

var imgs = [img0,img1,img2];

var intervalFading;
var intervalAnimate;

var imgThis = 0;
var imgNext = 1;

var fadeIn = 0;
var fadeOut = 1;

var start;



function animateFading() {
    fadeIn+=0.1;
    fadeOut-=0.1;
    imgs[imgThis].style.opacity = fadeOut;
    imgs[imgNext].style.opacity = fadeIn;

    if (fadeIn >= 1) {
        clearInterval(intervalAnimate);

        if (imgNext < 2) {
            imgNext++;
        } else {
            imgNext = 0;
        }

        if (imgThis < 2) {
            imgThis++;
        } else {
            imgThis = 0;
        }

        fadeIn = 0;
        fadeOut = 1;
    }

}

function fading() {
    intervalAnimate = setInterval(animateFading,50);
}

function startFading() {
    start = setInterval(fading, 3000);
}

window.addEventListener('load', startFading);

布尔值表示Chrome，因为它会触发两次

window.addEventListener('focus', startFading);

&

---

大多数浏览器都具有将内存使用容量重定向到唯一活动选项卡（当前正在查看）的功能。因此，当您切换当前选项卡时，

setInterval

和

setTimeout

计时会受到影响（如果您使用的是Google Chrome，您可以通过按住Shift+Esc键查看每个选项卡的内存使用情况。当前选项卡将使用高达25%的内存，而其余选项卡不会超过5%）

大多数浏览器都具有将内存使用容量重定向到唯一活动选项卡（当前正在查看）的功能。因此，当您切换当前选项卡时，

setInterval

和

setTimeout

计时会受到影响（如果您使用的是Google Chrome，您可以通过按住Shift+Esc键查看每个选项卡的内存使用情况。当前选项卡将使用高达25%的内存，而其余选项卡不会超过5%）

使用调用setTimeout vs使用setInterval的递归函数可以解决此问题使用调用setTimeout vs使用setInterval的递归函数可以解决此问题this@lolikroli见@lolikroli-See

window.addEventListener('focus', startFading);

window.addEventListener('blur', stopFading);