requestAnimationFrame并知道浏览器何时重新绘制？

Question

有没有办法知道浏览器何时正在运行requestAnimationFrame？

例如,当我从正在运行的标签切换标签时requestAnimationFrame,该功能停止执行,当我切换回它继续时,处理这个的最佳方法是什么？

Answer 1

要检测是否requestAnimationFrame正在运行100%,您可以检查:

window.addEventListener('blur', function() {
   //not running full
}, false);

和

window.addEventListener('focus', function() {
   //running optimal (if used)
}, false);

requestAnimationFrame当窗口(选项卡)不是活动窗口(使用IF时 - 它取决于实际使用的代码)时,可以使用这个,因为我们知道降低触发率(在大多数浏览器中requestAnimationFrame).

如果您希望它不断运行,您可以插入如下机制:

var isActiveTab = true; //update with the events above

function myLoop() {

    //my cool stuff here

    if (isActiveTab) {
         requestAnimationFrame(myLoop);
    } else {
         setTimeout(myLoop, 16); //force a rate (vblank sync not necessary
                                 //when display isn't updated
    }
}

请注意,requestAnimationFrame的速率降低不是标准的一部分,而是特定于浏览器的实现.