非アクティブなときのsetTimeout/setIntervalとrequestAnimationFrame

#9381 (animations halt when the browser is out of focus due to requestAnimationFrame) – jQuery - Bug Tracker
この問題についてちょっと調べたけど、setIntervalとかsetTimeoutはタブが非アクティブなときは、1000ms以下で設定してる場合1000msで実行されるみたい。1000ms以上のときは普通にそのまま実行される。んでrequestAnimationFrameは非アクティブなときは実行されない。

これが原因で、アニメーションの呼び出し元はsetTimeoutで回してるので非アクティブ時に実行されてキューにアニメーションがどんどん溜まる。でもrequestAnimationFrameは実行されないのでキューが溜まるのみで実行はされない。でアクティブになったときに一気にキューが実行される。

呼び出し側で関数を実行するときに

setTimeout(function() { next() }, 3000);

とかなってるところを

setTimeout(function() { requestAnimationFrame(function() { next() }) }, 3000);

とかにすればいいような気がするけど、まあなんか本来のrequestAnimationFrameの使い方じゃないし気持ち悪いかな。