Why is this an issue?

Polling loops (using setInterval or recursive setTimeout) that run regardless of the page visibility state waste energy continuously. When a user switches to another tab or minimizes the window, the browser keeps firing network requests and running JavaScript for nothing. This consumes CPU cycles, network bandwidth, and battery on mobile devices without providing any value to the user.

The fix is to guard the polling logic with a visibilitychange event listener so it pauses when the page is not visible.

Examples

Noncompliant

// Runs even when the tab is hidden
setInterval(() => fetchData(), 5000); // Noncompliant
// Recursive setTimeout without visibility check
function poll() {
  fetchData();
  setTimeout(poll, 5000); // Noncompliant
}
poll();

Compliant

// Pauses when the tab is hidden
let intervalId;

function startPolling() {
  intervalId = setInterval(() => fetchData(), 5000);
}

function stopPolling() {
  clearInterval(intervalId);
}

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    startPolling();
  } else {
    stopPolling();
  }
});

startPolling();
// Recursive setTimeout with visibility check
let timeoutId;

function poll() {
  fetchData();
  timeoutId = setTimeout(poll, 5000);
}

document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'visible') {
    poll();
  } else {
    clearTimeout(timeoutId);
  }
});

poll();

Resources

Documentation

Articles & blog posts