编程实现逐个点击元素并等待动态内容加载完成

本文介绍一种基于 MutationObserver 的可靠方案，用于在网页中顺序点击列表项、等待其触发的异步内容（如音频元素）加载完毕后再继续下一轮操作，避免 404 错误和竞态问题。

本文将分享一种基于 MutationObserver 的可靠方案，专门解决前端自动化场景中“顺序点击列表项、等待异步内容加载完成后再点击下一个”的典型需求——例如处理音频元素时，有效避免 404 错误和竞态问题。

在自动化抓取依赖前端交互来加载资源的网站（如 OTRR 老式广播资料库）时，许多开发者会遇到一个常见陷阱：直接使用链接进行 curl 下载，结果返回大量 404 Not Found。原因在于目标资源（例如

理想的解决方案需要满足三个核心条件：顺序执行、状态感知、防阻塞。以下是一个健壮、可复用、非递归且带超时保护的实现：

/**
 * 按顺序点击元素列表，并等待指定目标元素出现后再处理下一个
 * @param {NodeList | HTMLElement[]} elements - 待点击的元素数组（如 td.colTitle）
 * @param {string} targetSelector - 需等待出现的目标选择器（如 "audio" 或 "source[src]"）
 * @param {number} timeoutMs - 单次等待最大毫秒数（默认 10000）
 * @returns {Promise}
 */
async function clickThroughAndWait(elements, targetSelector, timeoutMs = 10000) {
  if (elements.length === 0) return;
  const current = elements.pop();
  console.log(`→ Clicking:`, current.textContent?.trim() || '[no text]');
  current.click();
  // 等待目标元素出现（使用 Promise + MutationObserver，避免递归栈溢出）
  await new Promise((resolve, reject) => {
    const observer = new MutationObserver(() => {
      if (document.querySelector(targetSelector)) {
        observer.disconnect();
        resolve();
      }
    });
    // 设置超时防护，防止页面无响应时无限等待
    const timeoutId = setTimeout(() => {
      observer.disconnect();
      reject(new Error(`Timeout waiting for ${targetSelector} after ${timeoutMs}ms`));
    }, timeoutMs);
    observer.observe(document.body, {
      childList: true,
      subtree: true
    });
    // 立即检查是否已存在（避免首次错过）
    if (document.querySelector(targetSelector)) {
      clearTimeout(timeoutId);
      observer.disconnect();
      resolve();
    }
  });
  // 递归处理下一个（使用 await 实现串行，而非深层递归）
  await clickThroughAndWait(elements, targetSelector, timeoutMs);
}

// 使用示例：
const titles = Array.from(document.querySelectorAll('td.colTitle'));
clickThroughAndWait(titles, 'audio')
  .then(() => console.log('✅ All clicks completed and audio elements loaded.'))
  .catch(err => console.error('❌ Failed:', err.message));

✅ 关键优势说明：

• 非递归调用栈安全：采用 await 链式执行，而非同步递归，即使处理数千项也不会导致栈溢出；
• 精准响应驱动：通过 MutationObserver 监听 DOM 变化，仅当目标元素真正挂载到页面后才继续推进，杜绝“假成功”现象；
• 内置超时机制：每一步都设有 timeoutMs 参数，超时立即抛错中断，便于调试和重试；
• 兼容性强：不依赖任何框架，纯原生 JavaScript 实现，可在现代浏览器控制台或 Puppeteer 环境中直接运行。

⚠️ 注意事项：

• 如果目标元素是
• 遇到网络极慢或高延迟的页面，可将 timeoutMs 适当调大，例如 30000；
• 若页面启用了 CSP 限制内联脚本，该方案依然有效——因为运行在 DevTools 控制台中，不受页面 CSP 影响；
• 批量下载时，建议等待全部点击完成后再统一提取 document.querySelectorAll('audio source').forEach(s => s.src)，避免中间状态干扰。

该方法将原本需要人工耗时数小时的操作压缩为一次粘贴执行，既可靠又易于维护，堪称处理动态加载型网页自动化采集的推荐范式。