当前位置:首页 > JavaScript

js 轮询实现

2026-02-02 08:19:25JavaScript

轮询的基本概念

轮询(Polling)是一种客户端定期向服务器发送请求以检查数据更新的技术。适用于需要实时性但无需高频率的场景,如聊天应用、状态监控等。

js 轮询实现

简单轮询实现

使用 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);
    });
}

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

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

优化:基于条件的轮询

在响应中判断是否需要继续轮询(如根据数据状态或服务器指令):

let shouldPoll = true;

function conditionalPoll() {
  if (!shouldPoll) return;

  fetch('https://api.example.com/data')
    .then(response => response.json())
    .then(data => {
      if (data.needsUpdate) {
        console.log('Data updated:', data);
      }
      setTimeout(conditionalPoll, 3000); // 延迟3秒后继续
    })
    .catch(() => {
      setTimeout(conditionalPoll, 10000); // 错误时延长间隔
    });
}

conditionalPoll(); // 启动

指数退避策略

处理失败时逐步增加轮询间隔,避免频繁重试:

let retryDelay = 1000;
const maxDelay = 60000;

function exponentialBackoffPoll() {
  fetch('https://api.example.com/data')
    .then(response => {
      retryDelay = 1000; // 成功时重置延迟
      return response.json();
    })
    .then(data => {
      console.log('Data:', data);
      setTimeout(exponentialBackoffPoll, 3000); // 正常轮询间隔
    })
    .catch(() => {
      setTimeout(exponentialBackoffPoll, retryDelay);
      retryDelay = Math.min(retryDelay * 2, maxDelay); // 延迟加倍
    });
}

exponentialBackoffPoll();

注意事项

  • 性能影响:高频轮询会增加服务器负载,需合理设置间隔。
  • 竞态条件:确保前一次请求完成后再发起下一次请求(如使用链式 setTimeout 而非 setInterval)。
  • 替代方案:对实时性要求高的场景,建议考虑 WebSocket 或 Server-Sent Events(SSE)。

标签: js
分享给朋友:

相关文章

js实现验证码

js实现验证码

实现验证码的JavaScript方法 生成随机验证码 使用Math.random()生成随机字符串,结合数字和字母: function generateCaptcha() { const cha…

js实现复制

js实现复制

使用document.execCommand方法 在较旧的浏览器中,可以使用document.execCommand('copy')实现复制功能。创建一个临时的textarea或input元素,将需要…

js 实现倒计时

js 实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是两种常见实现方式。 使用 setInterval 实…

js实现点击显示和隐藏

js实现点击显示和隐藏

实现点击显示和隐藏的JavaScript方法 使用classList.toggle切换类名 通过添加/移除CSS类控制元素的显示与隐藏,需提前在CSS中定义隐藏样式(如display: none)。…

js实现吸色

js实现吸色

使用Canvas实现吸色功能 通过Canvas的getImageData方法获取像素颜色数据。创建一个Canvas元素,将目标图像绘制到Canvas上,通过鼠标事件获取坐标对应的颜色值。 const…

js怎么实现异步

js怎么实现异步

异步实现方法 JavaScript中实现异步操作主要通过以下几种方式: Promise Promise是ES6引入的异步解决方案,用于处理异步操作的成功或失败状态。 const promise =…