本文讲解如何通过 Promise 封装递归 + setTimeout 的 DOM 元素轮询逻辑，确保返回的 Promise 可被 .then() 正确消费，解决“回调未触发”问题。

本文讲解如何通过 promise 封装递归 + settimeout 的 dom 元素轮询逻辑，确保返回的 promise 可被 `.then()` 正确消费，解决“回调未触发”问题。

在前端开发中，常需等待动态插入的 DOM 元素（如异步加载内容、第三方脚本注入节点）就绪后再执行操作。若直接轮询 document.querySelector 或 jQuery 选择器却不返回可链式调用的 Promise，就会导致 .then() 无法触发——正如原始代码中，setTimeout 内部递归调用 checkElement() 但未返回 Promise，导致外层调用实际返回 undefined。

正确做法是：每次调用都必须返回一个 Promise，并在元素出现时 resolve，未出现时递归延后重试并链式传递 resolve。以下是优化后的实现：

function checkElement(selector = '#idOfElement') {
    console.log('Checking element:', selector);

    if (jQuery(selector).length > 0) {
        return Promise.resolve();
    } else {
        return new Promise(resolve => {
            setTimeout(() => {
                // 递归调用并链式传递 resolve，确保上层 Promise 被正确 fulfill
                checkElement(selector).then(resolve);
            }, 2000);
        });
    }
}

// ✅ 正确使用：.then() 将在元素首次出现时执行
checkElement().then(() => console.log('✅ Element Found!'));

⚠️ 关键要点说明：

• 必须显式 return Promise：原始代码中 else 分支无返回值，导致函数整体返回 undefined，.then() 自然无效；
• 避免 Promise 构造器反模式：此处 Promise.resolve() 可直接替代 new Promise(resolve => resolve())，更简洁安全；
• 支持自定义选择器：添加 selector 参数提升复用性，避免硬编码 ID；
• 注意潜在风险：无限轮询可能造成内存或性能问题，生产环境建议增加超时机制（例如最大重试次数或总等待上限）：

function checkElement(selector = '#idOfElement', maxRetries = 10, delay = 2000) {
    const attempt = (retryCount = 0) => {
        if (jQuery(selector).length > 0) {
            return Promise.resolve();
        }
        if (retryCount >= maxRetries) {
            return Promise.reject(new Error(`Timeout: Element "${selector}" not found after ${maxRetries} attempts.`));
        }
        return new Promise(resolve => {
            setTimeout(() => resolve(attempt(retryCount + 1)), delay);
        });
    };
    return attempt();
}

这样既保持 Promise 链完整性，又增强健壮性。记住：任何异步流程封装为 Promise 时，“返回 Promise” 是链式消费的前提，递归调用也不例外。