当画布不可见时停止工作

Question

我有一些 javascript 可以处理一些数字并绘制到 HTML5 画布上，从而创建动画。当画布不可见时，昂贵且连续的数字运算/绘图毫无意义。

所以，当用户看不到画布时（例如，因为他们切换标签或最小化浏览器或向下滚动或其他各种可能性），我想暂停计算。

在 javascript 中，当用户看不到画布时，有什么好方法可以暂停周期性计时器？ （并在画布再次可见时恢复计时器。）

Answer 1

在您关注其他浏览器标签的场景中，requestAnimationFrame 是理想的选择——它会在标签模糊时自动暂停其循环，并在标签焦点时自动恢复。

在您的scroll-canvas-offscreen场景中，您可以测试画布的.scrollTop（有&没有.height）与窗口的.scrollTop（有&没有高度）。

要获得这两个测试的好处，请将 .scrollTop 测试放在 requestAnimationFrame 循环中。