当前位置：首页 > JavaScript

js轮询实现

2026-02-02 03:46:12JavaScript

轮询的基本概念

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

简单轮询实现

使用 setInterval 实现基础轮询，间隔固定时间请求数据：

function startPolling(url, interval) {
  const poll = setInterval(async () => {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log('Received:', data);
    } catch (error) {
      console.error('Polling error:', error);
    }
  }, interval);

  // 返回停止函数
  return () => clearInterval(poll);
}

// 使用示例
const stopPolling = startPolling('/api/data', 3000);
// 需要停止时调用 stopPolling();

带退避策略的轮询

增加错误处理和动态间隔调整，避免频繁失败请求：

function startSmartPolling(url, initialInterval, maxInterval) {
  let currentInterval = initialInterval;

  const poll = async () => {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log('Received:', data);
      currentInterval = initialInterval; // 成功时重置间隔
    } catch (error) {
      console.error('Polling error:', error);
      currentInterval = Math.min(currentInterval * 2, maxInterval); // 指数退避
    }
    setTimeout(poll, currentInterval);
  };

  poll();
  return () => clearTimeout(poll);
}

基于Promise的轮询

实现更精细的控制流程：

function promisePoll(fn, validate, interval) {
  const check = async () => {
    const result = await fn();
    if (validate(result)) {
      return result;
    }
    await new Promise(resolve => setTimeout(resolve, interval));
    return check();
  };
  return check();
}

// 使用示例
promisePoll(
  () => fetch('/api/status').then(r => r.json()),
  data => data.status === 'ready',
  1000
).then(finalData => console.log('Done:', finalData));