JavaScript: Stopping expensive work in inactive tabs

Is your application doing something expensive every few seconds? Maybe an animated slider that rotates images? Maybe you are updating data over the network every five minutes? It's a good idea to pause this if the your document tab is not even visible to the user. This saves your user's battery and data plan.

You can ask document.visibilityState Show archive.org snapshot or document.hidden Show archive.org snapshot whether this tab is visible:

Copyfunction pulse() {
  if (!document.hidden) {
    // do expensive thing
  }
}

setInterval(5000, pulse);

You can also subscribe to the visibilitychange event Show archive.org snapshot to be notified if visibility changes. This allows your background tab to become completely passive:

Copyfunction pulse() {
  // do expensive thing
}

let pulseInterval 
function schedulePulse() {
  if (document.hidden) {
    if (pulseInterval) {
      clearInterval(pulseInterval)
      pulseInterval = undefined
    }
  } else {
    pulseInterval = setInterval(5000, pulse)
  }
}

document.addEventListener('visibilitychange', schedulePulse)
schedulePulse()

What browsers do by default

Regardless of what you do in your own code, browsers will by default prevent inactive tabs from hogging too many resources:

• In inactive tabs, timeouts and intervals are throttled to 1+ seconds
• After a longer period of inactivity, some browsers will completely unload your tab, stopping any code that might still be running