当前位置:首页 > JavaScript

js实现轮训

2026-02-02 07:58:11JavaScript

轮询的基本概念

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

使用 setInterval 实现基础轮询

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

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 实现更灵活的控制(如根据响应动态调整间隔):

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;

结合指数退避的轮询

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

js实现轮训

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();

注意事项

  • 性能影响:频繁轮询可能增加服务器压力,需合理设置间隔时间。
  • 实时性需求:高实时性场景建议改用 WebSocket 或 Server-Sent Events(SSE)。
  • 错误处理:添加网络异常和服务器错误的容错机制。

标签: js
分享给朋友:

相关文章

js实现vue

js实现vue

Vue.js 简介 Vue.js 是一个渐进式 JavaScript 框架,用于构建用户界面。其核心库专注于视图层,易于与其他库或现有项目整合。 实现 Vue.js 的基本步骤 安装 Vue.j…

js实现轮播图

js实现轮播图

基础轮播图实现 使用HTML、CSS和JavaScript实现一个简单的自动轮播图。HTML结构包含一个容器和多个图片项。 <div class="slider"> <div…

js轮播图实现原理

js轮播图实现原理

轮播图的基本原理 轮播图通过动态切换显示的内容(图片、文本等)实现视觉上的滑动效果。核心原理是利用CSS和JavaScript控制元素的显示与隐藏,或通过变换位置实现滑动动画。 实现方法一:CSS…

js实现拷贝

js实现拷贝

实现文本拷贝 使用 document.execCommand 方法(已废弃但兼容性较好): function copyText(text) { const textarea = document…

js实现vr

js实现vr

使用WebXR API实现VR体验 WebXR是浏览器中实现VR和AR体验的标准API,它取代了早期的WebVR。现代浏览器如Chrome、Edge和Firefox已支持WebXR。 // 初始化W…

js实现祖玛

js实现祖玛

实现祖玛游戏的核心思路 祖玛游戏的核心玩法是发射彩色珠子,形成三个或以上相同颜色的珠子即可消除。以下是使用JavaScript实现的基本框架。 游戏初始化 创建画布并初始化游戏状态: const…