当前位置:首页 > JavaScript

js实现poll函数

2026-03-15 19:20:33JavaScript

实现 Poll 函数的方法

在 JavaScript 中,poll 函数通常用于定期检查某个条件是否满足,直到条件为真或超时。以下是几种实现方式:

基础实现

使用 setInterval 定期检查条件,满足后清除定时器:

function poll(fn, condition, interval = 100, timeout = 5000) {
  const endTime = Date.now() + timeout;
  const checkCondition = () => {
    const result = fn();
    if (condition(result)) {
      return Promise.resolve(result);
    }
    if (Date.now() > endTime) {
      return Promise.reject(new Error('Timeout exceeded'));
    }
    return new Promise(resolve => {
      setTimeout(() => resolve(checkCondition()), interval);
    });
  };
  return checkCondition();
}

使用 async/await

更现代的异步实现方式:

async function poll(fn, condition, interval = 100, timeout = 5000) {
  const endTime = Date.now() + timeout;
  while (true) {
    const result = await fn();
    if (condition(result)) return result;
    if (Date.now() > endTime) throw new Error('Timeout exceeded');
    await new Promise(resolve => setTimeout(resolve, interval));
  }
}

带取消功能的实现

添加取消机制,允许提前终止轮询:

js实现poll函数

function cancellablePoll(fn, condition, interval = 100, timeout = 5000) {
  let timer;
  let rejected = false;
  const promise = new Promise((resolve, reject) => {
    const endTime = Date.now() + timeout;
    const checkCondition = () => {
      if (rejected) return;
      const result = fn();
      if (condition(result)) {
        resolve(result);
      } else if (Date.now() > endTime) {
        reject(new Error('Timeout exceeded'));
      } else {
        timer = setTimeout(checkCondition, interval);
      }
    };
    checkCondition();
  });
  promise.cancel = () => {
    clearTimeout(timer);
    rejected = true;
  };
  return promise;
}

使用示例

// 检查某个元素是否出现在DOM中
poll(
  () => document.querySelector('.target-element'),
  element => element !== null,
  200,
  10000
).then(element => {
  console.log('Element found:', element);
}).catch(err => {
  console.error('Polling failed:', err);
});

// 可取消的示例
const polling = cancellablePoll(
  () => Math.random(),
  val => val > 0.9,
  100,
  5000
);

// 可以调用 polling.cancel() 提前终止
setTimeout(() => polling.cancel(), 2000);

polling.then(val => {
  console.log('Got value:', val);
}).catch(err => {
  console.error('Polling failed:', err);
});

注意事项

轮询间隔不宜过短,避免性能问题 超时时间应根据实际需求合理设置 对于DOM操作,考虑使用 MutationObserver 替代轮询更高效 取消功能对于长时间运行的任务很有必要

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

相关文章

js实现图片轮播

js实现图片轮播

实现基础图片轮播 使用HTML、CSS和JavaScript创建一个简单的图片轮播。HTML部分定义轮播容器和图片,CSS设置样式和动画效果,JavaScript处理轮播逻辑。 <div cl…

js实现复制功能

js实现复制功能

使用 document.execCommand 方法 这种方法适用于较旧的浏览器,但在现代浏览器中可能被逐步淘汰。通过创建一个临时的 textarea 元素,将文本内容放入其中,然后执行复制命令。…

js 实现分页

js 实现分页

实现分页的基本逻辑 分页功能通常需要后端返回数据总量或总页数,前端根据当前页码和每页条数截取对应数据。以下是一个基于JavaScript的简单分页实现方案: 前端分页实现 假设已有从后端获取的完整数…

js实现抽奖

js实现抽奖

实现抽奖功能的基本思路 抽奖功能的核心是随机选择奖项并展示结果。可以通过数组存储奖项,利用随机数生成索引,最后通过动画增强用户体验。 准备奖项数据 定义一个数组存储奖项信息,每个奖项可以包含名称、图…

js实现百叶窗

js实现百叶窗

使用CSS和JavaScript实现百叶窗效果 通过CSS动画和JavaScript事件监听可以实现百叶窗效果。核心思路是将内容区域分割为多个条状元素,通过控制它们的展开/折叠状态来模拟百叶窗。…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…