브라우저 탭이 현재 표시되고 자바 스크립트를 사용하여 렌더링되는지 어떻게 감지합니까?

Question

나는 .IMG가 CSS 전환이 가능하게했다 ..where

setInterval(function() { 
    $('.img').css('someprop', randomValue()); 
}, 2000); 

, 따라서 애니메이션을 사용하여 일부 이미지 프레젠테이션을 애니메이션하고 있습니다.

몇 분 동안 다른 탭으로 이동하여이 탭으로 돌아 오면 애니메이션이 5-6 초 동안 미쳐서 한 번에 모든 것을 따라 잡습니다.

탭이 보이지 않는 동안 표시되지 않은 애니메이션의 누적을 막을 수있는 방법이 있습니까? 이 문제를 해결하기위한 올바른 접근 방법은 무엇입니까? 성능상의 이유로 윈도우가 렌더링되지 않는 동안 브라우저가 애니메이션을 멈춘다는 것을 이해하지만, "놓친"모든 것을 따라 잡으려 고하지 말라고 말하는 방법이 있습니까?

Answer 1

window.requestAnimationFrame 정확히 탭을 "활성화"(보이는) 때 애니메이션/실행합니다.

자세한 내용은 MDN page on requestAnimationFrame을 참조하십시오. 폴 아일랜드어로

예제 코드는, 후세 (here's a link to his explanation page)

// requestAnim shim layer by Paul Irish 
    window.requestAnimFrame = (function(){ 
     return window.requestAnimationFrame  || 
       window.webkitRequestAnimationFrame || 
       window.mozRequestAnimationFrame || 
       window.oRequestAnimationFrame  || 
       window.msRequestAnimationFrame  || 
       function(/* function */ callback, /* DOMElement */ element){ 
       window.setTimeout(callback, 1000/60); 
       }; 
    })(); 


// example code from mr doob : http://mrdoob.com/lab/javascript/requestanimationframe/ 

var canvas, context, toggle; 

init(); 
animate(); 

function init() { 

    canvas = document.createElement('canvas'); 
    canvas.width = 512; 
    canvas.height = 512; 

    context = canvas.getContext('2d'); 

    document.body.appendChild(canvas); 

} 

function animate() { 
    requestAnimFrame(animate); 
    draw(); 

} 

function draw() { 

    var time = new Date().getTime() * 0.002; 
    var x = Math.sin(time) * 192 + 256; 
    var y = Math.cos(time * 0.9) * 192 + 256; 
    toggle = !toggle; 

    context.fillStyle = toggle ? 'rgb(200,200,20)' : 'rgb(20,20,200)'; 
    context.beginPath(); 
    context.arc(x, y, 10, 0, Math.PI * 2, true); 
    context.closePath(); 
    context.fill(); 

} 

여기에 게시