当前位置:首页 > 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实现pdf在线预览

js实现pdf在线预览

使用PDF.js实现PDF在线预览 PDF.js是由Mozilla开发的一个开源JavaScript库,可以在网页中直接渲染PDF文件。以下是实现PDF在线预览的步骤: 引入PDF.js库 在HT…

js实现求导

js实现求导

实现数值求导的方法 在JavaScript中实现求导通常采用数值方法,因为JavaScript不是符号计算语言。以下是常见的数值微分方法: 中心差分法 中心差分法提供较高精度的导数近似: func…

js实现搜索

js实现搜索

实现搜索功能的方法 在JavaScript中实现搜索功能可以通过多种方式完成,以下是几种常见的实现方法。 使用数组的filter方法 通过数组的filter方法可以筛选出符合条件的数据项。假设有一个…

js进度条实现

js进度条实现

使用HTML和CSS创建基础结构 在HTML中创建一个容器元素用于显示进度条,通常使用<div>元素。CSS用于设置进度条的样式,包括宽度、高度、颜色和圆角等属性。 <div cl…

js图片上传实现

js图片上传实现

图片上传的基本实现 使用HTML的<input type="file">元素配合JavaScript的File API实现基础图片上传功能。HTML部分需要设置accept="image/…

js实现下拉刷新

js实现下拉刷新

监听触摸事件 通过监听 touchstart、touchmove 和 touchend 事件来检测用户下拉手势。记录触摸起始位置和移动距离。 let startY = 0; let currentY…