JavaScript -在浏览器上，标签切换间隔不会通过clearInterval &窗口.聚焦/模糊被调用两次

JavaScript - On browsers tab switching Interval doesn't get cleared with clearInterval & window.onfocus/blur get called twice

本文关键字：模糊 聚焦 窗口 clearInterval 调用 两次 浏览器 标签 JavaScript      更新时间：2023-09-26

我有一个简单的脚本淡入和淡出一些图像。在我切换到另一个标签然后切换回来之前，它工作得非常好。切换回来后，似乎间隔运行动画，不被清除，函数继续运行。

实际代码:

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窗口。Onfocus被调用两次!为什么两次?

请帮助以不同的方式解决第一个问题或第二个Chrome。谢谢!

这似乎是一个已知的chromium bug:

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

可能的解决方案如下:

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

的例子:

var startedFading = false;
function startFading() {
    if (!startedFading) {
        startedFading = true;
        start = setInterval(fading, 3000);
    }
}
function stopFading() {
    startedFading = false;
    console.log("stop");
    clearInterval(start);
}

相关文章：