如何使用 async/await 实现条件等待

本文详细介绍了如何在 JavaScript 中利用 `async/await` 机制实现一个“忙等待”（busy wait）模式，以等待某个特定条件变为真。通过构建一个 `busyWait` 异步函数，结合 `Promise` 和 `setTimeout`，我们能够优雅地暂停异步流程，直至条件满足后继续执行，并探讨了其实现原理、示例代码及使用注意事项。

在异步编程中，我们经常会遇到需要等待某个条件满足才能继续执行后续逻辑的场景。虽然 async/await 提供了处理异步操作的强大能力，但它本身并没有直接提供“等待直到条件为真”的语法糖。然而，通过巧妙地结合 async/await、Promise 和 setTimeout，我们可以实现一个灵活且易于理解的条件等待机制，通常被称为“忙等待”或“轮询等待”。

实现条件等待的核心思路

核心思想是创建一个异步函数，该函数会周期性地检查一个给定的条件。如果条件不满足，它会暂停执行一小段时间，然后再次检查。这个过程会一直重复，直到条件满足为止。

我们将通过以下步骤实现这个机制：

1. 定义一个 busyWait 异步函数：它接受一个测试条件的回调函数作为参数。
2. 在循环中检查条件：使用 while 循环不断调用测试条件函数。
3. 暂停执行：如果条件不满足，使用 await new Promise(resolve => setTimeout(resolve, delayMs)) 来暂停当前异步函数的执行一小段时间。
4. 继续执行：当条件满足时，循环终止，函数返回，后续代码继续执行。

busyWait 函数的实现

下面是 busyWait 函数的具体实现：

/**
 * 异步忙等待函数，直到指定条件返回 true。
 *
 * @param {function(): boolean} test 一个返回布尔值的函数，用于判断条件是否满足。
 * @param {number} [delayMs=500] 每次检查条件失败后等待的毫秒数，默认为 500ms。
 */
async function busyWait(test, delayMs = 500) {
  // 只要测试条件不满足，就一直循环
  while (!test()) {
    // 暂停当前异步函数的执行，等待指定毫秒数后继续
    // new Promise 会立即执行其回调函数。setTimeout 会在指定时间后调用 resolve。
    // await 会等待这个 Promise 被 resolve，从而实现暂停。
    await new Promise(resolve => setTimeout(resolve, delayMs));
  }
}

实现原理详解：

• async function busyWait(test, delayMs = 500)：

  • async 关键字表明这是一个异步函数，它内部可以使用 await 关键字来暂停执行。
  • test 参数是一个函数，每次循环都会调用它来检查当前条件是否满足。它应该返回 true 或 false。
  • delayMs 参数定义了每次条件不满足时，函数暂停的毫秒数。这是一个关键参数，用于避免无限制地占用 CPU 资源。

• while (!test())：

  

  ViiTor实时翻译

  AI实时多语言翻译专家！强大的语音识别、AR翻译功能。

  116

  查看详情
  • 这是一个标准的 while 循环。它会不断地调用 test() 函数。
  • 如果 test() 返回 false（即条件不满足），循环继续执行内部代码。
  • 如果 test() 返回 true（即条件满足），!test() 为 false，循环终止，busyWait 函数完成执行。

• await new Promise(resolve => setTimeout(resolve, delayMs))：

  • 这是实现暂停的关键部分。
  • new Promise(...) 创建一个新的 Promise 对象。
  • resolve => setTimeout(resolve, delayMs) 是 Promise 的执行器函数。它安排了一个 setTimeout 定时器，在 delayMs 毫秒后调用 resolve 函数。
  • await 关键字会暂停 busyWait 函数的执行，直到它后面的 Promise 被 resolve。
  • 当 setTimeout 触发并调用 resolve() 时，Promise 状态变为 fulfilled，await 操作完成，busyWait 函数从暂停处继续执行，进入下一轮 while 循环，再次检查条件。

示例代码

让我们通过一个具体的例子来演示如何使用 busyWait 函数。在这个例子中，我们将等待一个变量 a 的值从 'hello' 变为 'world'。

console.log('--- 教程开始 ---');

// 定义 busyWait 函数
async function busyWait(test, delayMs = 500) {
  while (!test()) {
    await new Promise(resolve => setTimeout(resolve, delayMs));
  }
}

let a = 'hello'; // 初始值

console.log(`变量 'a' 的初始值: ${a}`);

// 模拟一个异步操作，在 2000 毫秒（2秒）后改变变量 'a' 的值
setTimeout(() => {
  a = 'world';
  console.log(`[${new Date().toLocaleTimeString()}] 变量 'a' 已在 setTimeout 中更新为: ${a}`);
}, 2000);

// 使用立即执行的 async 函数来演示 busyWait
(async () => {
  console.log(`[${new Date().toLocaleTimeString()}] 等待条件 'a === "world"' 满足...`);
  // 调用 busyWait，等待 'a' 的值变为 'world'
  await busyWait(() => a === 'world');
  // 当条件满足后，这行代码才会执行
  console.log(`[${new Date().toLocaleTimeString()}] 条件已满足！变量 'a' 的当前值: ${a}`);
  console.log('--- 教程结束 ---');
})();

运行结果分析：

1. 程序首先输出 --- 教程开始 --- 和 变量 'a' 的初始值: hello。
2. 然后，它会输出 等待条件 'a === "world"' 满足...。
3. busyWait 函数开始执行，由于 a 的值是 'hello'，条件 a === 'world' 为 false。
4. busyWait 会每隔 500 毫秒检查一次条件，并暂停。
5. 大约 2 秒后，setTimeout 回调函数执行，将 a 的值更新为 'world'。
6. busyWait 在下一次检查时发现 a === 'world' 为 true，循环终止。
7. await busyWait(...) 完成，console.log('条件已满足！...') 被执行。
8. 最终输出 --- 教程结束 ---。

注意事项与最佳实践

尽管 busyWait 提供了一种简单直接的条件等待方式，但在实际应用中仍需注意以下几点：

1. “忙等待”的性质：这种模式本质上是一种轮询。它会周期性地唤醒并检查条件，即使条件长时间不满足，也会持续进行。这可能导致不必要的 CPU 周期消耗，尤其是在 delayMs 设置过小的情况下。
2. 选择合适的 delayMs：
   • delayMs 值过小：会导致频繁检查，增加 CPU 负担。
   • delayMs 值过大：会导致条件满足后，程序响应的延迟增加。
   • 应根据实际需求和条件变化的频率来权衡选择。对于大多数 UI 或数据加载场景，几百毫秒到一秒通常是合理的。
3. 避免死循环：确保你的条件最终会变为 true。如果条件永远无法满足，busyWait 将会无限期地等待下去，导致程序卡死。
4. 替代方案：
   • 事件驱动：对于更复杂的应用，如果可能，优先考虑使用事件监听器或发布/订阅模式。例如，当数据加载完成时触发一个事件，而不是持续轮询。
   • Promise 链/回调：如果等待的是另一个异步操作的结果，直接使用 Promise 链 (.then()) 或 async/await 等待该 Promise 即可，而不是等待一个独立条件。
   • 专门的状态管理库：对于大型前端应用，React 的 useEffect 配合状态管理库（如 Redux、Vuex）或响应式编程库（如 RxJS）提供了更优雅、性能更好的状态变化监听机制。
   • MutationObserver：如果需要等待 DOM 元素的变化，MutationObserver 是一个更高效、更原生的选择。
5. 超时机制：为了防止无限等待，可以在 busyWait 函数中添加一个可选的 timeoutMs 参数。如果超过指定时间条件仍未满足，则抛出一个错误或返回一个特定值。

总结

通过 async/await 结合 Promise 和 setTimeout 实现的 busyWait 模式，为 JavaScript 异步编程提供了一种灵活的条件等待能力。它简单易懂，适用于许多需要等待特定状态或条件满足的场景。然而，作为一种“忙等待”机制，开发者应充分理解其工作原理和潜在的性能影响，并根据具体需求选择合适的 delayMs 值，并在可能的情况下优先考虑更高效的事件驱动或响应式编程模式。

以上就是如何使用 async/await 实现条件等待的详细内容，更多请关注php中文网其它相关文章！