本文探讨了如何在 JavaScript 中利用 `async/await` 机制，实现等待特定条件满足后才继续执行后续代码的功能。通过构建一个基于轮询的 `busyWait` 函数，结合 `setTimeout` 和 `Promise`，我们能够模拟出 `await(condition)` 的效果，有效管理异步操作中的条件依赖。文章详细阐述了实现原理、代码示例及使用时的注意事项。
在异步编程中，我们经常会遇到需要等待某个条件变为真（例如，等待数据加载完成、某个状态更新、或特定资源可用）才能继续执行后续逻辑的场景。虽然 await 关键字主要用于等待 Promise 对象的解决，但它本身不能直接用于等待一个布尔表达式为真，例如 await(x === true) 这样的语法是不被支持的。然而，我们可以巧妙地结合 async/await、Promise 和 setTimeout 来实现一个自定义的条件等待机制，即通过轮询（Polling）来检查条件。
实现原理：基于轮询的条件等待
核心思想是创建一个异步函数，它在一个循环中反复检查某个条件。如果条件不满足，它就暂停一小段时间（通过 setTimeout 和 Promise 实现），然后再次检查。直到条件满足，循环才终止，函数执行完毕，从而允许 await 它的调用者继续执行。
我们将这个机制封装在一个名为 busyWait 的函数中。
async function busyWait(testCondition) {
const delayMs = 500; // 每次检查的间隔时间（毫秒）
// 循环检查条件，直到 testCondition() 返回 true
while (!testCondition()) {
// 使用 await 暂停执行 delayMs 毫秒
await new Promise(resolve => setTimeout(resolve, delayMs));
}
}函数解析：
- testCondition: 这是一个回调函数，它封装了我们想要等待的条件。busyWait 函数会反复调用这个函数来检查条件是否满足。
- delayMs: 定义了每次条件检查之间的等待间隔。这个值决定了轮询的频率和响应速度。
- while (!testCondition()): 这是轮询的核心。只要 testCondition() 返回 false（即条件不满足），循环就会继续。
- await new Promise(resolve => setTimeout(resolve, delayMs)): 这是实现暂停的关键。
- new Promise(resolve => ...) 创建了一个新的 Promise。
- setTimeout(resolve, delayMs) 在 delayMs 毫秒后调用 resolve 函数。
- await 关键字会等待这个 Promise 解决，这意味着当前的 async 函数会在这里暂停执行 delayMs 毫秒，然后才会继续到 while 循环的下一次迭代，重新检查条件。
示例代码
让我们通过一个具体的例子来演示 busyWait 函数的用法。假设我们有一个变量 a，它在一段时间后会被异步修改，我们希望在 a 变为特定值后才执行后续操作。
console.log('begin');
// busyWait 函数的实现（如上所示）
async function busyWait(testCondition) {
const delayMs = 500;
while (!testCondition()) {
await new Promise(resolve => setTimeout(resolve, delayMs));
}
}
let a = 'hello'; // 初始值
// 模拟异步操作：2秒后将 a 的值改为 'world'
setTimeout(() => {
a = 'world';
console.log('Variable "a" changed to "world"');
}, 2000);
// 使用立即执行的 async 函数来演示 busyWait
(async () => {
console.log('Waiting for "a" to be "world"...');
// 等待直到变量 a 的值变为 'world'
await busyWait(() => a === 'world');
console.log('Condition met! Variable "a" is now "world".');
console.log('done');
})();运行流程：
- console.log('begin') 首先输出。
- a 被初始化为 'hello'。
- setTimeout 被设置，它将在 2000 毫秒（2秒）后执行，将 a 的值更新为 'world'。
- 立即执行的 async 函数开始执行。
- console.log('Waiting for "a" to be "world"...') 输出。
- await busyWait(() => a === 'world') 被调用。
- busyWait 函数内部开始循环检查 a === 'world'。
- 在最初的 2 秒内，a 仍然是 'hello'，所以条件为 false。
- 每次检查失败，busyWait 都会暂停 500 毫秒。
- 大约 2 秒后，setTimeout 回调执行，a 的值变为 'world'。
- busyWait 的下一次检查发现 a === 'world' 为 true。
- busyWait 循环终止，Promise 解决，await busyWait(...) 完成。
- console.log('Condition met! Variable "a" is now "world".') 输出。
- console.log('done') 输出。
这个例子清晰地展示了 busyWait 如何在不阻塞主线程的情况下，有效地等待一个异步条件。
注意事项与最佳实践
-
轮询间隔 (delayMs) 的选择：
-
避免无限循环：
- 如果 testCondition 永远不会变为 true，busyWait 将会进入无限循环，导致程序卡死。
- 解决方案： 引入一个超时机制。可以在 busyWait 函数中添加一个最大等待时间参数，如果超过这个时间条件仍未满足，则抛出错误或返回一个特定的值。
async function busyWaitWithTimeout(testCondition, timeoutMs, delayMs = 500) { const startTime = Date.now(); while (!testCondition()) { if (Date.now() - startTime > timeoutMs) { throw new Error('Timeout: Condition not met within specified time.'); } await new Promise(resolve => setTimeout(resolve, delayMs)); } } // 使用示例： // await busyWaitWithTimeout(() => a === 'world', 5000); // 最多等待5秒 -
替代方案：事件驱动或响应式编程：
总结
通过 async/await 结合 Promise 和 setTimeout 实现的 busyWait 函数，为 JavaScript 开发者提供了一种灵活且易于理解的条件等待机制。它允许程序在不阻塞主线程的前提下，暂停执行直到某个条件满足。在使用时，合理设置轮询间隔并考虑添加超时机制，可以确保代码的健壮性和性能。虽然存在更高级的异步模式，但对于许多场景，这种基于轮询的 await 条件等待方法是一个实用且直接的解决方案。
