RequestAnimationFrame暂停与恢复问题

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

问题是:但如果此时恢复,那恢复后的执行情况是怎么样的呢?

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

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

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

然后也去测试了下raf实现的计时器,截图如下:
RequestAnimationFrame暂停与恢复问题

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

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

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

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

回答

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

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

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

以上是 RequestAnimationFrame暂停与恢复问题 的全部内容, 来源链接: utcz.com/a/82160.html

回到顶部