使用 async/await 实现条件等待：一种轮询机制

本文探讨了如何在 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');
})();

运行流程：

蓝心千询

蓝心千询是vivo推出的一个多功能AI智能助手

34

查看详情

1. console.log('begin') 首先输出。
2. a 被初始化为 'hello'。
3. setTimeout 被设置，它将在 2000 毫秒（2秒）后执行，将 a 的值更新为 'world'。
4. 立即执行的 async 函数开始执行。
5. console.log('Waiting for "a" to be "world"...') 输出。
6. 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(...) 完成。
7. console.log('Condition met! Variable "a" is now "world".') 输出。
8. console.log('done') 输出。

这个例子清晰地展示了 busyWait 如何在不阻塞主线程的情况下，有效地等待一个异步条件。

注意事项与最佳实践

1. 轮询间隔 (delayMs) 的选择：

   • 过短： 会导致频繁检查，增加 CPU 负载，尤其是在条件长时间不满足的情况下。
   • 过长： 会增加条件满足后的响应时间。
   • 选择一个合适的 delayMs 需要权衡响应速度和资源消耗。对于大多数前端或轻量级后端场景，几百毫秒（如 100ms - 500ms）通常是一个合理的范围。

2. 避免无限循环：

   • 如果 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秒

   登录后复制

3. 替代方案：事件驱动或响应式编程：

   • 虽然轮询是一个通用的解决方案，但在某些场景下，事件驱动或响应式编程模式可能更高效。
   • 如果条件的变化可以通过事件（例如 DOM 事件、WebSocket 消息、Node.js EventEmitter）来通知，那么直接监听事件并执行回调会比轮询更即时、更节省资源。
   • 如果涉及到复杂的状态管理和数据流，RxJS 等响应式编程库可以提供更强大的工具来处理异步条件和数据流。
   • 然而，对于简单的条件等待，或者在没有现成事件机制的情况下，busyWait 提供了一个简洁有效的 async/await 解决方案。

总结

通过 async/await 结合 Promise 和 setTimeout 实现的 busyWait 函数，为 JavaScript 开发者提供了一种灵活且易于理解的条件等待机制。它允许程序在不阻塞主线程的前提下，暂停执行直到某个条件满足。在使用时，合理设置轮询间隔并考虑添加超时机制，可以确保代码的健壮性和性能。虽然存在更高级的异步模式，但对于许多场景，这种基于轮询的 await 条件等待方法是一个实用且直接的解决方案。

以上就是使用 async/await 实现条件等待：一种轮询机制的详细内容，更多请关注php中文网其它相关文章！