当前位置：首页 > JavaScript

js实现轮训

2026-02-02 07:58:11JavaScript

轮询的基本概念

轮询（Polling）是一种客户端定期向服务器发送请求以检查数据更新的技术。适用于实时性要求不高的场景，但可能增加服务器负载。

使用 `setInterval` 实现基础轮询

通过 setInterval 定时发起请求，适合简单的轮询需求：

js实现轮训

function pollServer() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => console.log('Updated data:', data))
    .catch(error => console.error('Polling error:', error));
}

const pollingInterval = setInterval(pollServer, 5000); // 每5秒轮询一次

// 停止轮询
// clearInterval(pollingInterval);

使用 `setTimeout` 实现递归轮询

通过递归调用 setTimeout 实现更灵活的控制（如根据响应动态调整间隔）：

js实现轮训

function pollServer() {
  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      console.log('Data received:', data);
      setTimeout(pollServer, data.nextPollDelay || 3000); // 动态调整下次轮询时间
    })
    .catch(error => {
      console.error('Polling failed:', error);
      setTimeout(pollServer, 10000); // 失败时延长间隔
    });
}

pollServer(); // 启动首次轮询

带终止条件的轮询示例

通过标志变量或外部事件控制轮询的启停：

let isPollingActive = true;

function pollServer() {
  if (!isPollingActive) return;

  fetch('https://api.example.com/status')
    .then(response => response.json())
    .then(data => {
      if (data.complete) {
        console.log('Task completed!');
        isPollingActive = false;
      } else {
        setTimeout(pollServer, 2000);
      }
    });
}

pollServer();

// 终止轮询
// isPollingActive = false;

结合指数退避的轮询

在错误发生时采用指数退避策略，减少无效请求：

let retryDelay = 1000; // 初始延迟1秒

function pollWithBackoff() {
  fetch('https://api.example.com/data')
    .then(response => {
      if (!response.ok) throw new Error('Server error');
      return response.json();
    })
    .then(data => {
      retryDelay = 1000; // 成功后重置延迟
      console.log('Data:', data);
      setTimeout(pollWithBackoff, 5000); // 正常轮询间隔
    })
    .catch(error => {
      console.error('Error, retrying...');
      retryDelay *= 2; // 延迟时间翻倍
      setTimeout(pollWithBackoff, Math.min(retryDelay, 30000)); // 上限30秒
    });
}

pollWithBackoff();