• 等待某个 DOM 元素加载完成
• 等待某个全局变量被初始化
• 等待第三方 SDK 加载成功
• 等待某个状态变为 true 才执行后续逻辑

传统的做法可能是用 setTimeout 层层嵌套，或者监听事件，但这些方式要么不够灵活，要么难以维护。

今天，我分享一个简洁、可复用、支持 Promise 的异步等待函数 —— waiting()，让你轻松应对各种“等一等再执行”的需求！

🔧 什么是 waiting 函数？

waiting 是一个基于 轮询 + Promise 实现的异步等待工具。它会以固定频率检查某个条件是否成立，一旦满足，立即触发后续操作。

✅ 核心特性：

• 支持自定义判断条件
• 可设置最大重试次数，防止无限循环
• 可配置轮询间隔时间
• 返回 Promise，完美融入现代异步编程

💡 核心代码实现

javascript
深色版本
/**
 * 异步等待条件成立
 * @param {Function}condition - 条件函数，返回 true 或 false
 * @param {Number}maxCount - 最大重试次数，默认 500
 * @param {Number}timer - 轮询间隔（毫秒），默认 10ms
 * @returns {Promise}
 */
function waiting(condition, maxCount = 500, timer = 10) {
    let retryCount = 0;
    return new Promise((resolve, reject) => {
        const myInterval = setInterval(() => {
            // 条件满足，成功 resolve
            if (condition()) {
                clearInterval(myInterval);
                resolve();
            }

            // 超出最大重试次数，清除定时器（可选 reject）
            if (retryCount >= maxCount) {
                clearInterval(myInterval);
                // 可根据需要 reject(new Error('Timeout'))
            }

            retryCount++;
        }, timer);
    });
}

🛠️ 使用示例

示例 1：等待 DOM 元素出现

javascript
深色版本
waiting(() => {
    return document.getElementById('app') !== null;
}).then(() => {
    console.log('DOM 元素 #app 已加载，开始初始化...');
    // 执行后续操作
});

示例 2：等待全局变量就绪

javascript
深色版本
// 假设第三方 SDK 异步加载后会挂载 window.MySDK
waiting(() => !!window.MySDK)
    .then(() => {
        console.log('MySDK 已加载，可以调用 API');
        MySDK.init();
    });

示例 3：等待状态变更

javascript
深色版本
let isLoading = true;

// 模拟异步加载完成
setTimeout(() => {
    isLoading = false;
}, 2000);

// 等待加载结束
waiting(() => !isLoading).then(() => {
    console.log('加载完成，执行下一步！');
});

⚙️ 参数说明

⚠️ 提示：maxCount=500 + timer=10ms 表示最多等待 5秒。可根据实际场景调整。

🌟 为什么推荐这个方案？

✅ 轻量无依赖
✅ 逻辑清晰易懂
✅ 适用于多种异步等待场景

📌 小贴士

• 如果希望超时后抛出错误，可以在 retryCount >= maxCount 时调用 reject()
• 对性能敏感的场景，可适当调大 timer，减少 CPU 占用
• 推荐封装成工具函数，全局复用

📣 结语

waiting 函数虽小，却能解决大问题。它让“等待”这件事变得可控、可预测、可维护。无论是 SPA 应用、插件开发，还是自动化脚本，都非常实用。