当前位置：首页 > JavaScript

Js轮训实现

2026-04-06 08:19:47JavaScript

轮询（Polling）的实现方法

轮询是一种客户端定期向服务器发送请求以获取最新数据的技术。以下是几种常见的实现方式：

使用 setInterval 实现基础轮询

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

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

// 使用示例
const stopPolling = startPolling('/api/data', 5000);

// 需要停止时调用
// stopPolling();

带有错误处理和退避策略的轮询

async function advancedPolling(url, interval, maxRetries = 3) {
  let retryCount = 0;

  const poll = async () => {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error('Network response was not ok');

      const data = await response.json();
      console.log('Polling data:', data);
      retryCount = 0; // 重置重试计数器
    } catch (error) {
      console.error('Polling error:', error);
      retryCount++;

      if (retryCount >= maxRetries) {
        console.error('Max retries reached, stopping polling');
        return;
      }

      // 指数退避
      const backoffDelay = Math.min(interval * (2  retryCount), 30000);
      setTimeout(poll, backoffDelay);
      return;
    }

    setTimeout(poll, interval);
  };

  poll();
}

// 使用示例
advancedPolling('/api/data', 5000);

基于 Promise 的轮询实现

function promisePolling(fetcher, interval, condition) {
  const check = async () => {
    try {
      const result = await fetcher();
      if (condition(result)) {
        return result;
      }
    } catch (error) {
      console.error('Polling error:', error);
    }

    return new Promise(resolve => {
      setTimeout(() => resolve(check()), interval);
    });
  };

  return check();
}

// 使用示例
promisePolling(
  () => fetch('/api/data').then(res => res.json()),
  2000,
  data => data.status === 'ready'
).then(finalData => {
  console.log('Final data:', finalData);
});

使用 AbortController 实现可取消的轮询

function cancellablePolling(url, interval) {
  const controller = new AbortController();

  const poll = async () => {
    try {
      const response = await fetch(url, {
        signal: controller.signal
      });
      const data = await response.json();
      console.log('Polling data:', data);

      if (!controller.signal.aborted) {
        setTimeout(poll, interval);
      }
    } catch (error) {
      if (error.name !== 'AbortError') {
        console.error('Polling error:', error);
        setTimeout(poll, interval);
      }
    }
  };

  poll();

  return () => controller.abort();
}

// 使用示例
const stopPolling = cancellablePolling('/api/data', 3000);

// 需要停止时调用
// stopPolling();