Make JavaScript Polling Smarter: From setInterval to Adaptive Strategies

Polling is a long‑standing technique for fetching the latest data from a server, such as order status or real‑time notifications, often implemented with setInterval to send requests at fixed intervals.

// Simple brute‑force polling
setInterval(fetchOrderStatus, 2000); // every 2 seconds

This approach has several drawbacks:

Resource waste : Requests are sent continuously regardless of data changes or user attention.

Server pressure : Thousands of clients polling frequently can overload the server.

Request overlap : If a response takes longer than the interval, new requests start before the previous ones finish, causing a backlog.

How can we make polling “smart”, delivering timely data while conserving resources?

Strategy 1: Use setTimeout instead of setInterval (basic optimization)

Unlike setInterval, which ignores whether the previous request has completed, a recursive setTimeout ensures the next request is scheduled only after the current one finishes.

Advantage : Perfectly avoids request overlap, guaranteeing orderly intervals.

Strategy 2: Exponential Backoff – graceful error handling

When the server fails or the network is unstable, fixed‑frequency requests are like “adding salt to a wound”. Exponential backoff gradually increases the polling interval after errors and resets it once the service recovers.

let errorCount = 0;
const BASE_INTERVAL = 2000; // base 2 seconds
const MAX_INTERVAL = 60000; // max 60 seconds

function pollWithBackoff() {
  fetch('/api/fedjavascript')
    .then(res => {
      if (!res.ok) throw new Error('服务器响应异常');
      return res.json();
    })
    .then(data => {
      errorCount = 0;
      console.log('数据获取成功:', data);
      scheduleNextPoll();
    })
    .catch(error => {
      errorCount++;
      console.error('请求失败，将延长下次请求时间');
      scheduleNextPoll();
    });
}

function scheduleNextPoll() {
  const interval = Math.min(BASE_INTERVAL * Math.pow(2, errorCount), MAX_INTERVAL);
  setTimeout(pollWithBackoff, interval);
  console.log(`下一次请求将在 ${interval / 1000} 秒后发起`);
}

scheduleNextPoll();

Advantage : Significantly reduces client and server load during instability, achieving intelligent fault tolerance.

Strategy 3: Use the Page Visibility API – slow down when the user isn’t looking

If the user switches tabs or minimizes the browser, high‑frequency polling is unnecessary. The Page Visibility API tells us whether the page is visible.

let pollerId;
function scheduleNextPoll() {
  const interval = document.hidden ? 30000 : 2000; // 30 s when hidden, 2 s otherwise
  clearTimeout(pollerId);
  pollerId = setTimeout(pollWithBackoff, interval);
  console.log(`页面${document.hidden ? '不可见' : '可见'}。下一次请求将在 ${interval / 1000} 秒后发起`);
}

document.addEventListener('visibilitychange', () => {
  if (!document.hidden) {
    console.log('页面恢复可见，立即执行一次轮询');
    pollWithBackoff();
  } else {
    console.log('页面已切换到后台');
  }
});

scheduleNextPoll();

Advantage : Greatly saves CPU and battery on user devices and cuts unnecessary server requests, a key optimization for modern web apps.

Although intelligent polling improves efficiency, it remains a client‑pull model. For scenarios demanding strict real‑time performance, alternatives such as WebSockets (persistent bidirectional connections) or Server‑Sent Events (lightweight unidirectional streams) are recommended.

From the simple setInterval loop to a combination of adaptive strategies, and finally to WebSockets or SSE, the evolution reflects a continuous pursuit of performance, user experience, and system robustness.