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的速率降低不是标准的一部分，而是浏览器特定的实现。

Answer 2

当你再次回到带有动画的标签时，它必须正常工作（如果是这样的话 - 以下是你的答案！）

这就是英国皇家空军所做的。为了优化性能。可以使用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);
}

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

3 个答案: