JavaScript - 브라우저 탭 간격 전환 문제

Question

일부 이미지가 페이드 인/아웃되는 간단한 스크립트가 있습니다. 다른 탭으로 전환 한 다음 다시 전환하기 전에 완벽하게 작동합니다. 다시 전환 한 후 애니메이션이 실행되는 간격이 지워지지 않고 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); 

솔루션 :

var startedFading = false; 

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

function stopFading() { 
    startedFading = false; 
     clearInterval(startFading); 
} 


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

가 두 번

window.addEventListener('focus', startFading); 

&

01 화재로 부울은 크롬입니다

window.addEventListener('blur', stopFading); 

Answer 1

대부분의 브라우저에는 현재 사용중인 탭 (현재보고있는 메모리 탭)으로 메모리 사용 용량을 리디렉션하는 기능이 있습니다. 따라서 현재 탭을 전환 할 때 setInterval 및 setTimeout 타이밍이 영향을받습니다 (Google 크롬을 사용하는 경우 Shift + Esc를 눌러 각 탭의 메모리 사용량을 볼 수 있습니다). 현재 탭은 최대 25 %를 사용하지만 나머지는 5 %를 넘지 않음)