本文介绍一种基于 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)，避免中间状态干扰。
该方法将原本需要人工耗时数小时的操作压缩为一次粘贴执行，既可靠又易于维护，堪称处理动态加载型网页自动化采集的推荐范式。
