JavaScript visibilitychange: пауза polling вкладки

Категория: JavaScript · Язык: JavaScript · Обновлено:

Скрытая вкладка часто не нуждается в частом polling. Событие visibilitychange позволяет остановить таймер при уходе пользователя и возобновить его при возврате, уменьшая лишние запросы.

Рабочий пример

JavaScript
let timer;
function startPolling() {
  if (timer) return;
  timer = setInterval(refreshData, 15_000);
}
function stopPolling() {
  clearInterval(timer);
  timer = undefined;
}
document.addEventListener('visibilitychange', () => {
  if (document.hidden) stopPolling();
  else startPolling();
});
if (!document.hidden) startPolling();

startPolling идемпотентна: повторное событие не создаст второй интервал. Замените refreshData своим запросом и очистите listener при уничтожении приложения.

Частый вопрос

Как сразу обновить данные после возврата?

Вызовите refreshData() внутри ветки else перед запуском таймера. Обработайте параллельные запросы, чтобы возврат вкладки не создал дубль.