本文介绍一种基于 mutationobserver 的可靠方案，用于在网页中顺序点击列表项、等待其触发的异步内容（如音频元素）加载完毕后再继续下一轮操作，避免 404 错误和竞态问题。
本文介绍一种基于 mutationobserver 的可靠方案，用于在网页中顺序点击列表项、等待其触发的异步内容（如音频元素）加载完毕后再继续下一轮操作，避免 404 错误和竞态问题。
在自动化抓取如 OTRR（Old Time Radio Repository）这类依赖前端交互加载资源的网站时，常见痛点是：直接提取链接后用 curl 下载会返回大量 404 Not Found——因为目标资源（如 <audio> 标签或其 src）并非静态存在，而是需用户点击标题后由 JavaScript 动态注入 DOM 并预加载。手动点击数百项显然不可行，而简单轮询 .pop().click() 又无法同步等待响应，极易导致点击过快、资源未就绪、后续提取失败。
理想的解决方案需满足三点：顺序执行、状态感知、防阻塞。以下是一个健壮、可复用、非递归且带超时保护的实现：
/**
* 按顺序点击元素列表，并等待指定目标元素出现后再处理下一个
* @param {NodeList | HTMLElement[]} elements - 待点击的元素数组（如 td.colTitle）
* @param {string} targetSelector - 需等待出现的目标选择器（如 "audio" 或 "source[src]"）
* @param {number} timeoutMs - 单次等待最大毫秒数（默认 10000）
* @returns {Promise<void>}
*/
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，异常时抛错中断，便于调试与重试；
- 兼容性强：不依赖特定框架，纯原生 JS，适用于任何现代浏览器控制台或 Puppeteer 环境。
⚠️ 注意事项：
- 若目标元素为 <audio>，建议进一步校验 audio.src 是否有效（非空、非 about:blank），可在 resolve() 前添加判断；
- 对于极慢网络或高延迟页面，适当增大 timeoutMs（如 30000）；
- 若页面启用 CSP 限制内联脚本，该方案仍适用（因运行于 DevTools 控制台，不受页面 CSP 影响）；
- 批量下载时，建议在全部点击完成后，再统一提取 document.querySelectorAll('audio source').forEach(s => s.src)，避免中间状态干扰。
此方法将原本需人工耗时数小时的操作，压缩为一次粘贴执行，兼顾可靠性、可维护性与工程实践性——是动态加载型网页自动化采集的推荐范式。
