JavaScript-浏览器选项卡切换间隔不小于';t使用clearInterval&;window.onfocus/blur被调用两次
我有一个简单的脚本,可以淡入淡出一些图像。在我切换到另一个选项卡然后切换回之前,它工作得非常好。切换回来后,就像运行动画的时间间隔一样,并没有被清除,函数继续运行 真正的代码:JavaScript-浏览器选项卡切换间隔不小于';t使用clearInterval&;window.onfocus/blur被调用两次,javascript,focus,clearinterval,Javascript,Focus,Clearinterval,我有一个简单的脚本,可以淡入淡出一些图像。在我切换到另一个选项卡然后切换回之前,它工作得非常好。切换回来后,就像运行动画的时间间隔一样,并没有被清除,函数继续运行 真正的代码: var img0 = document.getElementById("image0"); var img1 = document.getElementById("image1"); var img2 = document.getElementById("image2"); var imgs = [img0,img1,
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);
这就解决了问题。但仅限FF。在FF中,脚本运行得非常完美。在Chrome窗口中,onfocus会被调用两次!为什么两次
请帮助以不同的方式解决第一个问题,或者使用Chrome解决第二个问题。谢谢 这似乎是一个已知的铬错误: 可能的解决办法是:
$。在('focus',startfreading)
var startedFading = false;
function startFading() {
if (!startedFading) {
startedFading = true;
start = setInterval(fading, 3000);
}
}
function stopFading() {
startedFading = false;
console.log("stop");
clearInterval(start);
}
第二个解决方案成功了。塔克斯!
var startedFading = false;
function startFading() {
if (!startedFading) {
startedFading = true;
start = setInterval(fading, 3000);
}
}
function stopFading() {
startedFading = false;
console.log("stop");
clearInterval(start);
}