本文探讨了如何在javascript中利用`async/await`机制实现异步条件等待。通过构建一个非阻塞的轮询函数，我们可以在不阻塞主线程的情况下，持续检查某个条件直到其满足，从而优雅地处理依赖于异步状态变化的逻辑。文章提供了详细的代码示例和注意事项，帮助开发者理解并应用这种模式。

在异步编程中，我们经常会遇到需要等待某个特定条件变为真才能继续执行后续逻辑的场景。直观上，开发者可能会尝试使用类似 await(condition === true) 的语法，但这种直接将布尔条件与 await 结合的方式是行不通的。await 关键字只能用于等待一个 promise 对象的解决（resolve）或拒绝（reject），而不是一个简单的布尔表达式。

要实现“等待直到条件满足”的功能，我们需要结合 async/await 和周期性检查（即轮询）的机制。核心思想是创建一个异步函数，在该函数内部使用一个循环来反复检查条件，并在每次检查之间引入一个短暂的、非阻塞的延迟。

实现异步条件等待机制

我们可以通过以下模式来构建一个通用的条件等待函数：

灵机语音

灵机语音

56

查看详情

1. 定义一个异步轮询函数： 这个函数将接受一个测试条件的回调函数作为参数。
2. 使用 while 循环： 在条件不满足时持续循环。
3. 引入非阻塞延迟： 在每次循环迭代中，使用 await new Promise(resolve => setTimeout(resolve, delayMs)) 来暂停函数的执行一段时间，同时不阻塞javaScript事件循环。

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

console.log('开始执行');  /**  * 异步等待函数，直到给定的测试条件返回 true。  * @param {function} test - 一个无参数函数，返回一个布尔值，表示条件是否满足。  * @param {number} [delayMs=500] - 每次检查之间的等待时间（毫秒）。  */ async function waitUntil(test, delayMs = 500) {   // 当条件不满足时，持续循环   while (!test()) {     // 暂停执行 delayMs 毫秒，期间不阻塞主线程     await new Promise(resolve => setTimeout(resolve, delayMs));   } }  // 示例：等待一个变量的值发生变化 let dataStatus = 'loading'; // 初始状态  // 模拟一个异步操作，2秒后改变 dataStatus 的值 setTimeout(() => {   dataStatus = 'ready';   console.log('数据状态已更新为: ready'); }, 2000);  // 立即执行一个异步IIFE（立即执行函数表达式）来使用 waitUntil (async () => {   console.log('等待数据状态变为 "ready"...');   // 调用 waitUntil 函数，传入一个检查 dataStatus 的回调   await waitUntil(() => dataStatus === 'ready');   console.log('数据状态已满足，继续执行后续逻辑。');   console.log('执行结束'); })();

代码解析

• async function waitUntil(test, delayMs = 500): 定义了一个名为 waitUntil 的异步函数。它接受两个参数：
  • test: 这是一个回调函数，每次轮询时都会执行它来检查条件。它应该返回 true 表示条件已满足，false 表示条件尚未满足。
  • delayMs: 这是一个可选参数，表示每次检查之间等待的毫秒数，默认为500毫秒。
• while (!test()): 这是一个 while 循环，只要 test() 函数返回 false（即条件不满足），循环就会继续。
• await new Promise(resolve => setTimeout(resolve, delayMs)): 这是实现非阻塞延迟的关键。
  • new Promise(resolve => …) 创建了一个新的 Promise。
  • setTimeout(resolve, delayMs) 会在 delayMs 毫秒后调用 resolve 函数，从而使 Promise 变为已解决状态。
  • await 关键字会暂停 waitUntil 函数的执行，直到这个 Promise 被解决。由于 setTimeout 是异步的，它不会阻塞javascript的主线程，允许其他任务在这段时间内执行。一旦 delayMs 过去，Promise 解决，waitUntil 函数就会从 await 处恢复执行，进入下一次循环迭代检查条件。

运行示例说明

1. console.log(‘开始执行’); 和 console.log(‘等待数据状态变为 “ready”…’); 会立即输出。
2. setTimeout(() => dataStatus = ‘ready’, 2000); 设定了一个定时器，它会在2秒后将 dataStatus 变量从 ‘loading’ 更改为 ‘ready’。
3. await waitUntil(() => dataStatus === ‘ready’); 会开始轮询。
   • 在最初的2秒内，dataStatus === ‘ready’ 始终为 false，所以 waitUntil 函数会每隔 delayMs（默认500ms）暂停并重新检查。
   • 2秒后，dataStatus 变为 ‘ready’，此时 test() 回调返回 true。
   • while 循环条件 !test() 变为 false，循环终止。
4. waitUntil 函数执行完毕，await 语句完成，后续的 console.log 语句被执行。

注意事项与最佳实践

• 轮询间隔 (delayMs) 的选择：
  • 过短： 会导致频繁检查，增加CPU负担，尤其是在条件需要较长时间才能满足时。
  • 过长： 会增加响应时间，导致在条件满足后，程序需要更长时间才能作出响应。
  • 应根据实际应用场景和对响应速度的要求来权衡选择合适的间隔。
• 避免无限等待： 在生产环境中，单纯的条件等待可能会导致程序无限期地等待一个永远不会满足的条件。建议为 waitUntil 函数添加一个超时机制，例如，在等待超过一定时间后抛出一个错误或返回一个特定的值。
• 资源消耗： 尽管这种方法是非阻塞的，但频繁的轮询仍然会占用一定的系统资源。如果条件满足的触发机制是事件驱动的（例如，用户输入、网络请求完成、dom事件等），那么优先使用事件监听器或 Promise 链式调用会是更高效、更优雅的选择。然而，对于某些无法直接通过事件监听的内部状态变化，这种轮询模式是非常实用的。
• 适用场景： 这种模式特别适用于等待：
  • 异步数据加载完成。
  • 某个外部库或框架初始化完毕。
  • DOM元素在异步渲染后出现。
  • 在测试环境中，等待某个异步操作的结果。

总结

通过巧妙地结合 async/await 和 setTimeout 包装的 Promise，我们可以实现一个强大且非阻塞的异步条件等待机制。这种模式允许我们的程序在条件尚未满足时“暂停”执行，而不会阻塞主线程，从而保持应用程序的响应性。理解并正确应用这种模式，能够有效提升异步JavaScript代码的可读性和健壮性，使我们能更优雅地处理复杂的异步流程。