Question

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

真实的代码：

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

所以我想出了以下解决方案：

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

function stopFading() {

    console.log("stop");
    clearInterval(start);
}


window.addEventListener('focus', startFading);    
window.addEventListener('blur', stopFading);

这解决了这个问题。但仅限FF。在FF中，脚本运行得非常完美。在Chrome中，window.onfocus被调用两次！为什么两次？

请帮助以不同的方式修复第一个问题，或者使用Chrome修复第二个问题。 THX！

Answer 1

这似乎是一个已知的铬虫：

http://code.google.com/p/chromium/issues/detail?id=117307

可能的解决方案是：

如果您正在使用jQuery，则可以尝试使用$.on('focus', startFading)
您可以设置一个布尔值，并确保不会多次调用startFading：

示例：

var startedFading = false;

function startFading() {
    if (!startedFading) {
        startedFading = true;
        start = setInterval(fading, 3000);
    }
}

function stopFading() {
    startedFading = false;
    console.log("stop");
    clearInterval(start);
}

JavaScript - 在浏览器选项卡上切换Interval不会被clearInterval＆amp;清除window.onfocus / blur被调用两次

1 个答案: