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

Question

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

例如，当我从正在运行的选项卡切换选项卡时requestAnimationFrame，该功能停止执行，当我切换回来时它继续执行，处理此问题的最佳方法是什么？

Answer 1

要检测是否requestAnimationFrame100% 运行，您可以检查：

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

和

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

requestAnimationFrame当窗口（选项卡）不是活动窗口（如果正在使用 - 这取决于实际使用的代码）时，我们知道这可以降低触发率（在大多数浏览器中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 的速率降低不是标准的一部分，而是特定于浏览器的实现。

Answer 2

当您再次返回带有动画的选项卡时，它一定可以正常工作（如果是这样的话-以下是您的答案！！！）

这就是 RAF 所做的。优化性能。SetInterval 和 Settimeout 可用于创建动画，但它们无法与浏览器交互，最终会占用 cpu，性能也很慢。

但是你的问题真的不是问题。这实际上是英国皇家空军用来改善整体动画体验的技巧。

有几篇文章解释了 RAF。 http://creativejs.com/resources/requestanimationframe/

只是一个优化技巧——无需担心

Answer 3

我在一个项目中用于画布重绘的解决方案。它不是 100% 准确，但它适用于注意力不集中的用户

// This will run when user is inactive
let = handleVisibilityChange = () => {
    if (document.hidden) {
        setTimeout(() => {
            updateYourStuff();
            handleVisibilityChange();
        }, 1000);
    }
};

// Listen if user is active or inactive
document.addEventListener("visibilitychange", handleVisibilityChange, false);

// Your loop when user is active
function myLoop() {
    updateYourStuff();
    requestAnimationFrame(myLoop);
}