在 Web 前端开发中，经常需要等待某些异步操作完成后再执行后续的操作，如请求后端数据、加载图片、执行动画等。但是 JavaScript 中的异步操作在执行时是不会阻塞程序的执行的，因此需要一些手段来等待异步操作完成后再执行后续操作。在 Node.js 开发中，可以使用回调函数或 Promise 对象等方式实现异步操作的等待，但在浏览器端的开发中，由于浏览器对异步操作有一定限制，因此需要使用专门的工具来实现等待异步操作完成的功能。wait-and-go 就是一款帮助前端开发者实现异步操作等待的 npm 包。
安装
可以使用 npm 直接安装 wait-and-go 包：
npm install wait-and-go --save
使用方法
wait-and-go 的使用非常简单，只需要引入包并使用其提供的 wait 函数即可：
const wait = require('wait-and-go');
async function example() {
await wait(2000); // 等待 2s
console.log('wait over');
}
example();上面的代码首先引入了 wait-and-go 包，然后在一个名为 example 的 async 函数中使用了 wait 函数。wait 函数的参数是等待时间（单位为毫秒），在这里设置为 2000 毫秒（即 2 秒）。因此，调用 example 函数时，会等待 2 秒后输出 wait over。
注意，wait 函数必须在一个 async 函数里使用，因为它返回的是一个 Promise 对象。
进阶使用
wait-and-go 包还提供了一些功能更丰富的函数，比如 waitUntil 和 waitWhile。
waitUntil
waitUntil 函数可以等待一个条件满足后再执行后续代码。比如，我们可以使用 waitUntil 函数等待页面上一个指定元素存在后再执行后续操作：
const wait = require('wait-and-go');
async function example() {
await wait.waitUntil(() => document.getElementById('target'));
console.log('wait over');
}
example();在上面的例子中，使用了 wait 的 waitUntil 函数，它的参数是一个函数，这个函数需要返回一个条件。在这里，我们使用的条件是页面上是否存在 id 为 target 的元素。当条件满足时，waitUntil 函数才会返回，然后输出 wait over。这样就可以确保代码在目标元素加载完成后再执行。
waitWhile
waitWhile 函数可以等待一个条件不再满足后再执行后续代码。比如，我们可以使用 waitWhile 函数等待一个长任务执行完毕后再执行后续操作：
-- -------------------- ---- -------
----- ---- - -----------------------
----- -------- --------- -
--- ------- - -----
------------- -- -
------- - ------
-- ------
----- ----------------- -- ---------
----------------- -------
-
----------在上面的例子中，首先定义了一个变量 running 初始值为 true，然后使用 setTimeout 函数 5 秒后将 running 置为 false。接着，使用 wait 的 waitWhile 函数等待 running 不再为 true（即 running 变为了 false）后再执行后续代码。
总结
wait-and-go 是一个非常方便的 npm 包，可以帮助前端开发者轻松实现异步操作的等待。它提供了很多实用的函数，可以满足不同的等待需求。在实际的开发中，需要根据具体情况选择合适的等待方式，避免出现异步操作影响程序正常执行的问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668eed9381d61a3540cdd