Observing Timers During Tab Visibility Changes

[JSFiddle]

The goal is to pause the timer/interval when the tab focus is lost, and resume when activated.

Timers and interval callbacks continue triggering when a tab is backgrounded. If these callbacks include behavior that requires repainting the screen (or perhaps async IO), these actions seem to get buffered until the tab is reactivated. This can lead to repeated 'machine gun' callback executions as the timer/interval callback buffer gets unloaded.

PauseOnVisibilityChange hooks into the tab Visibility event to pause any active timers. Check Dev Console for event notifications.



Interval:
Active Elapsed: 0ms