本文介绍如何通过 Promise 封装递归 + setTimeout 的轮询逻辑，实现可链式调用的 DOM 元素等待函数，解决因未正确返回 Promise 导致 .then() 不触发的问题。
本文介绍如何通过 promise 封装递归 + settimeout 的轮询逻辑，实现可链式调用的 dom 元素等待函数，解决因未正确返回 promise 导致 `.then()` 不触发的问题。
在前端开发中，常需等待动态插入的 DOM 元素（如异步加载内容、SPA 路由切换后渲染的组件）就绪后再执行后续逻辑。若直接轮询却忽略 Promise 链的完整性，就会出现 .then() 永不执行的问题——正如原始代码中：setTimeout 内部调用 checkElement() 但未将其返回的 Promise 传递出去，导致外层调用无法捕获最终 resolve。
正确的做法是：每次递归调用都必须返回一个 Promise，并确保所有分支（命中/未命中）均统一返回 Promise 实例。以下是优化后的实现：
function checkElement(selector, maxRetries = 10, interval = 2000) {
console.log(`Checking for element: ${selector}...`);
if (jQuery(selector).length > 0) {
return Promise.resolve();
}
// 达到最大重试次数时拒绝 Promise，避免无限循环
if (maxRetries {
setTimeout(() => {
checkElement(selector, maxRetries - 1, interval)
.then(resolve)
.catch(reject);
}, interval);
});
}
// 使用示例
checkElement('#idOfElement')
.then(() => console.log('✅ Element Found'))
.catch(err => console.error('❌', err.message));
关键改进点说明：
- ✅ 统一 Promise 返回：无论元素是否存在，函数始终返回 Promise，保证调用链完整；
- ✅ 递归 Promise 透传：setTimeout 回调中调用 checkElement(...).then(resolve)，将深层 resolve 向上冒泡；
- ✅ 防死循环保护：引入 maxRetries 参数，避免因元素永远不存在导致无限等待；
- ✅ 可配置性增强：支持自定义选择器、重试次数和间隔时间，提升复用性；
- ✅ 错误处理完备：超时时通过 Promise.reject() 抛出明确错误，便于上层捕获与降级处理。
⚠️ 注意事项：
- 确保 jQuery 已加载且 selector 语法合法；
- 若项目已迁移到原生 DOM API，可将 jQuery(selector).length > 0 替换为 document.querySelector(selector) !== null；
- 在现代项目中，更推荐使用 MutationObserver 替代轮询以提升性能与响应性，但本方案适用于兼容性要求高或简单场景。
该模式不仅适用于 DOM 元素检测，还可扩展至任意“等待某条件成立”的异步场景（如 API 数据就绪、第三方 SDK 加载完成等），是 Promise 递归封装的经典实践。
