使用 await 等待条件满足：实现异步忙等待-js教程-PHP中文网

使用 await 等待条件满足：实现异步忙等待

DDD

发布： 2025-10-24 10:51:28

原创

521人浏览过

使用 await 等待条件满足：实现异步忙等待

本文将探讨如何在javascript异步编程中使用`await`关键字，以实现等待特定条件变为真才继续执行的逻辑。通过一个自定义的`busywait`函数，我们将展示如何结合`while`循环和`settimeout`来模拟条件等待，从而解决直接`await(condition)`不可行的问题。文章会提供详细的代码示例和使用注意事项，帮助开发者在异步流程中优雅地处理条件依赖。

在异步JavaScript编程中，开发者经常会遇到需要等待某个条件满足后才能继续执行后续操作的场景。例如，等待一个变量被外部异步操作修改，或者等待某个资源加载完成。直观上，我们可能会设想使用类似 await(condition === true); 的语法，但JavaScript的await关键字只能等待一个Promise对象的解决（resolve）或拒绝（reject），而不能直接等待一个布尔条件。

实现基于 await 的条件等待

要实现等待条件满足的功能，我们可以采用一种“忙等待”（Busy Wait）的策略，即在一个循环中不断检查条件，并在每次检查之间引入一个短暂的延迟，以避免阻塞主线程。这种模式结合 async/await 可以优雅地实现。

核心思想是创建一个异步函数，它接受一个测试函数作为参数。这个异步函数会在一个 while 循环中反复调用测试函数，直到测试函数返回 true。每次检查之间，通过 await new Promise(resolve => setTimeout(resolve, delayMs)) 引入一个非阻塞的延迟。

示例代码

以下是一个具体的实现示例：

console.log('程序开始执行');

/**
 * 异步忙等待函数，直到指定条件满足。
 * @param {Function} test 一个返回布尔值的函数，用于检查条件。
 * @returns {Promise<void>} 当条件满足时解决的Promise。
 */
async function busyWait(test) {
  const delayMs = 500; // 每次检查之间的延迟时间（毫秒）
  // 只要条件不满足，就继续循环
  while (!test()) {
    // 暂停执行 delayMs 毫秒，但不阻塞主线程
    await new Promise(resolve => setTimeout(resolve, delayMs));
  }
}

// 模拟一个异步改变的变量
let dataStatus = 'pending';

// 模拟一个异步操作，2秒后将 dataStatus 设为 'ready'
setTimeout(() => {
  dataStatus = 'ready';
  console.log('数据状态已更新为: ready');
}, 2000);

// 立即执行一个异步IIFE（立即执行函数表达式）
(async () => {
  console.log('等待数据状态变为 "ready"...');
  // 使用 busyWait 等待 dataStatus 变为 'ready'
  await busyWait(() => dataStatus === 'ready');
  console.log('数据状态已满足，程序继续执行！');
})();

console.log('主线程继续执行，不被 busyWait 阻塞');

登录后复制

代码解析

busyWait(test) 函数:
- 它是一个 async 函数，因此可以在内部使用 await。
- delayMs 定义了每次条件检查之间的间隔时间。选择合适的延迟时间至关重要，过短可能导致频繁检查，增加CPU负担；过长则会增加等待的响应时间。
- while (!test()) 循环会持续执行，直到传入的 test 函数返回 true。
- await new Promise(resolve => setTimeout(resolve, delayMs)) 是实现非阻塞延迟的关键。setTimeout 会在指定延迟后执行 resolve 函数，从而使 Promise 解决。await 会暂停 busyWait 函数的执行，直到这个 Promise 解决，然后继续下一次循环迭代。
变量与异步操作:

AI帮个忙
多功能AI小工具，帮你快速生成周报、日报、邮、简历等

55

查看详情
- dataStatus 变量模拟了需要等待其状态改变的资源。
- setTimeout 模拟了一个耗时2秒的异步操作，该操作在后台运行，并在完成后更新 dataStatus。
主异步流程:
- 一个立即执行的 async 函数表达式 (async () => { ... })() 用于启动我们的等待逻辑。
- await busyWait(() => dataStatus === 'ready'); 是核心调用。它会暂停当前 async 函数的执行，直到 dataStatus 变为 'ready'。在此期间，busyWait 会每隔 500 毫秒检查一次条件。
- 在 busyWait 函数内部等待时，主线程（console.log('主线程继续执行，不被 busyWait 阻塞');）并不会被阻塞，可以继续执行其他任务。

运行上述代码，你将看到以下输出：

程序开始执行
主线程继续执行，不被 busyWait 阻塞
等待数据状态变为 "ready"...
数据状态已更新为: ready  (大约2秒后)
数据状态已满足，程序继续执行！ (紧随上一行)

登录后复制

这证明了 busyWait 成功地在不阻塞主线程的情况下等待了条件的满足。

注意事项与替代方案

“忙等待”的开销: 这种模式本质上是一种“忙等待”或“轮询”。如果条件需要很长时间才能满足，或者 delayMs 设置得过短，会导致 test 函数被频繁调用，从而消耗不必要的CPU资源。
选择合适的 delayMs: 根据实际应用场景，合理设置 delayMs 至关重要。如果对响应时间要求高，可以适当缩短；如果条件变化不频繁，可以适当延长。
避免无限循环: 确保 test 函数中的条件最终会变为 true，否则 busyWait 将会进入无限循环，导致程序卡死。可以考虑为 busyWait 函数添加一个超时机制，例如在一定时间后抛出错误。
更优的异步模式: 对于更复杂的异步协调场景，通常有更高效和事件驱动的模式：
- 事件监听: 如果条件的变化可以通过事件触发（例如DOM事件、Node.js的EventEmitter），那么直接监听事件是最佳选择。
- 回调函数/Promise: 对于API调用，通常会返回Promise或接受回调函数，直接链式调用或 await 这些Promise更为自然。
- 消息队列/发布订阅: 在复杂的系统架构中，可以使用消息队列或发布订阅模式来解耦组件间的依赖。
- MutationObserver: 在前端开发中，如果需要等待DOM元素的变化，MutationObserver 是一个非常高效且非轮询的方案。

总结

尽管直接使用 await(condition) 是不可行的，但通过结合 while 循环和 await new Promise(resolve => setTimeout(resolve, delayMs))，我们可以有效地实现一个非阻塞的异步条件等待机制。这种 busyWait 模式在处理简单异步条件依赖时非常有用，尤其是在没有现成事件或Promise可供等待的情况下。然而，开发者应始终权衡其性能开销，并优先考虑更事件驱动或Promise-based的异步协调方案。

以上就是使用 await 等待条件满足：实现异步忙等待的详细内容，更多请关注php中文网其它相关文章！