JavaScript实现等待条件满足或超时：获取页面评论方案问询

这个需求太常见了！我之前做无限加载评论的功能时也碰到过类似场景，用Promise结合定时器就能完美解决——既能等待目标评论元素出现，又能设置3秒超时，完全贴合你的要求。

核心思路 #

1. 先写一个通用的工具函数，负责定期检查目标元素是否存在，同时设置超时定时器，超时则终止等待。
2. 在getComments函数中，先滚动到页面底部触发Ajax加载，再调用这个工具函数等待评论元素。
3. 成功获取到元素后，收集所有评论内容并转成JSON字符串；超时则返回指定的提示字符串。

完整代码实现 #

// 通用工具函数：等待元素出现或超时
function waitForElement(selector, timeout = 3000) {
  return new Promise((resolve, reject) => {
    // 先检查元素是否已经存在（避免不必要的等待）
    const existingElement = document.querySelector(selector);
    if (existingElement) {
      return resolve(existingElement);
    }

    // 定期检查元素（每100ms一次，可根据需求调整频率）
    const checkInterval = setInterval(() => {
      const targetElement = document.querySelector(selector);
      if (targetElement) {
        clearInterval(checkInterval); // 找到元素后清除定时器
        resolve(targetElement);
      }
    }, 100);

    // 设置超时逻辑
    setTimeout(() => {
      clearInterval(checkInterval); // 超时后清除检查定时器
      reject(new Error("Timeout waiting for comments"));
    }, timeout);
  });
}

// 你的目标函数：获取评论并返回JSON字符串
async function getComments() {
  // 步骤1：滚动到页面底部，触发Ajax加载评论
  window.scrollTo(0, document.body.scrollHeight);

  try {
    // 步骤2：等待.comment元素出现，最多等待3秒
    await waitForElement('.comment', 3000);

    // 步骤3：收集所有评论内容（可根据实际需求调整结构）
    const commentList = Array.from(document.querySelectorAll('.comment')).map(comment => ({
      content: comment.textContent.trim(),
      // 如果你需要其他信息（比如作者、时间），可以在这里扩展：
      // author: comment.querySelector('.comment-author')?.textContent.trim() || '匿名用户',
      // timestamp: comment.querySelector('.comment-time')?.textContent.trim() || '未知时间'
    }));

    // 步骤4：转成JSON字符串返回
    return JSON.stringify(commentList);
  } catch (error) {
    // 超时或其他错误时，返回指定的简单字符串
    return "Timeout waiting for comments to load";
  }
}

使用方式 #

你可以直接调用getComments()，因为它是async函数，所以需要用await或者.then()来获取结果：

// 方式1：用await（需要在async函数中调用）
async function fetchComments() {
  const result = await getComments();
  console.log(result); // 要么是评论的JSON字符串，要么是超时提示
}

// 方式2：用.then()
getComments().then(result => console.log(result));

注意事项 #

• 检查频率调整：waitForElement中的100ms检查间隔是平衡性能和响应速度的折中值，如果你需要更灵敏的检测，可以改成50ms；如果担心性能影响，改成200ms也没问题。
• 多元素等待：如果需要等待至少N条评论出现，可以修改waitForElement的检查逻辑，比如把document.querySelector改成document.querySelectorAll(selector).length >= N。
• 滚动兼容性：window.scrollTo在大部分浏览器都能正常工作，如果需要平滑滚动，可以改成window.scroll({top: document.body.scrollHeight, behavior: 'smooth'})，但注意旧版IE不支持behavior参数。

内容的提问来源于stack exchange，提问作者mdaliyan