RequestAnimationFrame暂停与恢复问题

Question

当requestAnimationFrame() 不可见时，requestAnimationFrame() 会被暂停调用以提升性能和电池寿命。

问题是：但如果此时恢复，那恢复后的执行情况是怎么样的呢？

查询了很多资料，但大多未提到这里的具体运行情况，只是提到一句，会保持原状态恢复执行。（A）

如果基于此说法，那用RAF实现的倒计时不会出现问题吗？
比如下面场景：
打开了一个10点抢购的商品，然后发现还有10分钟才到10点，倒计时处于9点50的状态。然后切换标签页去看剧。此时raf应该暂停，看了一会剧，发现电脑时钟到了10点，再切回抢购标签页。
那此时的时间是处于9点50，还是10点呢？

据A的说法，那应该是9点50。

然后也去测试了下raf实现的计时器，截图如下：

看这计时器，0-1秒的情况下执行了很多次，1-10秒是1s一次（切换标签页状态），11s开始又是1s执行多次。（B）

距B的结论猜测，感觉又可能是10点。

所以，希望有人能告知下RAF在暂停与恢复的状态下，这个过程是怎样的？

PS: 不算是个特别好的问题吧，但确实没查到资料，且好奇心使然，想追根溯源。

Answer 1

没明白你的疑惑是什么。raf本质就是注册此刻开始下一次页面更新后的回调，所以你需要在回调中注册下一次回调，以达到持续调用的目的。页面切到后台，更新不频繁了，回调自然就拖着不给你触发，或者以很低的频率触发，在你切回来的那一刻页面又开始正常更新。

raf做计时器这当然要在每次回调的时候获取当前时间，然后和目标时间做对比来得出时间进度，所以回调触发的频率影响的是倒计时更新的时效性，时效性进而影响了准确性。

在你举的例子中，不管页面被后台了raf到底以什么频率触发，抑或根本不触发，都无所谓，但在你切回页面的那一刻，raf肯定会立马触发。而只要你的回调逻辑恰当，你就能让用户看到10点，仿佛被后台的那段时光你的页面仍然是辛勤地在计数。

---

题主说完全不知道我在说什么，更新一版。

简单回答，代码写的不好的，你可能会看到 9点50。逻辑实现恰当，你能立马看到 10 点。取决于你这个抢购网站的代码实现。

当然大部分电商网站别说只是这个页面被后台再切回的问题了，更甚比如你修改本地时间也是要考虑的，所以抢购时间当然要依赖服务器时间啦，所以被切后台根本不是问题，切回来的时候问一下服务器抢购开始没有就ok啦。

回到 requestAnimationFrame，没查到资料说切后台或者打开节能模式后回调触发频率具体会有什么变化，但是有一点是明确的，你的程序不应该依赖于它触发的频率。RAF暂停再恢复，那么只要tab切回来立马触发一次回调，你就有机会更新 UI 使得页面显示不出问题。那这就足够了。

requestAnimationFrame 只管回调，不管倒计时计数什么的，倒计时是你自己的逻辑，最终呈现出来是什么样子完全取决于你自己的实现。