当前位置:首页 > JavaScript

js实现poll函数

2026-04-07 12:45:36JavaScript

js实现poll函数

js实现poll函数

实现 Poll 函数的方法

Poll 函数通常用于轮询某个条件或状态,直到满足特定条件或超时。以下是几种实现方式:

基本实现

function poll(fn, condition, interval = 1000, timeout = 30000) {
  const endTime = Date.now() + timeout;

  const checkCondition = (resolve, reject) => {
    Promise.resolve(fn())
      .then(result => {
        if (condition(result)) {
          resolve(result);
        } else if (Date.now() < endTime) {
          setTimeout(checkCondition, interval, resolve, reject);
        } else {
          reject(new Error('Polling timeout'));
        }
      })
      .catch(reject);
  };

  return new Promise(checkCondition);
}

使用 async/await 的实现

async function poll(fn, condition, interval = 1000, timeout = 30000) {
  const endTime = Date.now() + timeout;

  while (Date.now() < endTime) {
    const result = await fn();
    if (condition(result)) return result;
    await new Promise(resolve => setTimeout(resolve, interval));
  }

  throw new Error('Polling timeout');
}

带取消功能的实现

function cancellablePoll(fn, condition, interval = 1000, timeout = 30000) {
  let timer;
  let cancelled = false;

  const promise = new Promise((resolve, reject) => {
    const endTime = Date.now() + timeout;

    const checkCondition = () => {
      if (cancelled) {
        reject(new Error('Polling cancelled'));
        return;
      }

      Promise.resolve(fn())
        .then(result => {
          if (condition(result)) {
            resolve(result);
          } else if (Date.now() < endTime) {
            timer = setTimeout(checkCondition, interval);
          } else {
            reject(new Error('Polling timeout'));
          }
        })
        .catch(reject);
    };

    checkCondition();
  });

  promise.cancel = () => {
    cancelled = true;
    clearTimeout(timer);
  };

  return promise;
}

使用示例

// 示例:轮询直到某个元素出现在DOM中
poll(
  () => document.querySelector('.target-element'),
  element => element !== null,
  500,
  5000
)
  .then(element => console.log('Element found:', element))
  .catch(err => console.error('Polling failed:', err));

参数说明

  • fn: 要执行的函数,返回一个值或Promise
  • condition: 判断是否满足条件的函数,接收fn的结果作为参数
  • interval: 轮询间隔时间,默认为1000ms
  • timeout: 超时时间,默认为30000ms

这些实现提供了灵活的轮询机制,可以根据具体需求选择合适的方法。

标签: 函数js
分享给朋友:

相关文章

js实现列表

js实现列表

使用 JavaScript 实现列表 JavaScript 提供了多种方式来实现列表功能,包括数组操作、DOM 元素动态生成等。以下是几种常见的实现方法: 使用数组存储列表数据 数组是 JavaSc…

js分组实现

js分组实现

分组实现方法 在JavaScript中,可以通过多种方式实现数组或对象的分组操作。以下是几种常见的方法: 使用Array.prototype.reduce() 通过reduce方法可以轻松实现数组分…

js实现变形

js实现变形

使用 CSS 和 JavaScript 实现元素变形 在 JavaScript 中实现变形效果通常结合 CSS 的 transform 属性,通过动态修改该属性实现元素的旋转、缩放、倾斜或平移。 基…

js实现vue路由

js实现vue路由

Vue 路由的基本实现 在 Vue.js 中实现路由功能通常使用 Vue Router 库。Vue Router 是 Vue.js 官方的路由管理器,用于构建单页面应用(SPA)。 安装 Vue R…

js实现搜索

js实现搜索

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

js验证码的实现

js验证码的实现

验证码的基本实现原理 验证码(CAPTCHA)的核心目标是区分人类用户和自动化程序。JavaScript可用于生成或验证客户端验证码,但需注意纯前端验证可能被绕过,通常需结合后端验证。 纯前端验证码…