requestAnimationFrame和canvas切换tab页面的问题？

Question

在canvas里实现一个红包雨功能，不停地掉落红包（使用定时器每600毫秒掉落一次，每次最多掉落1-3个），但是如果我切换到其他标签页，过一段时间后回来会有一瞬间同时一堆红包从顶部开始下落？？？

这是为什么呢

Answer 1

我以前回答过类似的
https://segmentfault.com/q/10...

Answer 2

因为在页面不可见时，requestAnimationFrame就会停止执行，setTimeout和setInterval也会节约性能，从小于1000ms的间隔，变为1000ms，导致绘画不正确。

在创建红包的时候，可以判断下页面可见性，若页面不可见时，则不进行创建。

if (document.visibilityState==='hidden' || document.hidden) {
    return;
}