什么是 can-wait
can-wait 是一个针对异步函数的 npm 包，它提供了一种方法来限制连续对异步函数的不必要调用。当异步调用仍在进行时，它可以让后续调用等待 Promise 完成后再触发，可以避免不必要的多余调用。
安装 can-wait
我们可以在 npm 上找到 can-wait 这个包，并安装到本地项目中。
npm install can-wait --save
使用 can-wait
可以引入 can-wait 模块来使用它的 API。
const canWait = require('can-wait');创建一个 can-wait 实例
可以创建一个 can-wait 实例来调用异步函数，并设置等待时间和异步函数的参数。
下面是一个例子，通过 can-wait 调用一个 HTTP 请求，延迟一秒钟。
-- -------------------- ---- ------- ----- ------- - -------------------- ----- ----- - ----------------- ----- ---- - ---------- ----- -------- - ----- ------ -- - ----- --- - ----- ------------------------------------------------------ ------ --------- -- ----- ------------ - -------------- - - ------ ------------------------- --------------------------- -- - ----------------- ---- ------ ---------------------------- --- --------------------------- -- - ----------------- ---- ------ ---
上面代码中，可以通过 wait 函数来创建实例，每次调用 getUsersWait 的时候，can-wait 都会根据设定的等待时间来决定是否等待前一个异步函数调用完成。在这个例子中，设定的等待时间是 1 秒钟。第一次调用 getUsersWait，它会立刻执行，但是第二次调用 getUsersWait，它会在 1 秒钟之后再执行。
取消一个 can-wait 实例的等待
如果我们在等待时间内不想再等待，可以使用 cancel 函数来取消等待。
-- -------------------- ---- ------- ----- ------- - -------------------- ----- ----- - ----------------- ----- ---- - ---------- ----- -------- - ----- ------ -- - ----- --- - ----- ------------------------------------------------------ ------ --------- -- ----- ------------ - -------------- - - ------ ------------------------- --------------------------- -- - ----------------- ---- ------ ---------------------- ---------------------------- --- --------------------------- -- - ----------------- ---- ------ ---
在上面的例子中，第一次调用 getUsersWait 和第二次调用 getUsersWait 的等待时间是 1 秒钟。当第一次调用 getUsersWait 完成后，它调用了 cancel 函数取消了第二次的等待，这导致第二次调用获取不到想要的结果。
重新开始等待
如果我们需要重新开始等待，可以使用 resume 函数，它会等待下一个异步函数调用完成。上面的例子可以改为以下形式。
-- -------------------- ---- ------- ----- ------- - -------------------- ----- ----- - ----------------- ----- ---- - ---------- ----- -------- - ----- ------ -- - ----- --- - ----- ------------------------------------------------------ ------ --------- -- ----- ------------ - -------------- - - ------ ------------------------- --------------------------- -- - ----------------- ---- ------ ---------------------- ---------------------------- --- --------------------------- -- - ----------------- ---- ------ ---
总结
can-wait 可以让我们更好地控制异步函数的连续调用，避免了不必要的多余调用，减少了请求对服务器的压力，提升了运行效率。这篇文章介绍了 can-wait 的基本用法，并提供了一些示例代码作为参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c91ccdc64669dde5955