javascript - 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);

正如我们所知，当窗口(选项卡)不是事件窗口(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 速率的降低不是标准的一部分，而是浏览器特定的实现。