RxJS 中的 throttle 和 audit 操作符
RxJS 是一个流行的 JavaScript 库，提供了一种响应式编程的范式。其核心是 Observables，这是一种数据类型，表示执行异步和非阻塞操作的多项数据。操作符是 RxJS 中另一个很重要的概念，它为我们提供了方便的方法来处理 Observables 中的数据。 throttle 和 audit 操作符就是 RxJS 中的两个重要的操作符，用于控制 Observables 输出的频率。
throttle 操作符
throttle 操作符允许我们限制 Observables 的输出。它会在指定的时间窗口内选择第一个 Observable，并忽略在这个时间窗口内的其他 Observables。当指定时间窗口已过，throttle 操作符将再次允许下一个 Observable。
以鼠标移动事件为例，我们想要在用户在 1 秒钟内最多只绘制一次形状，可以使用 throttle 操作符。具体实现如下：
-- -------------------- ---- ------- ------ - --------- - ---- ------- ------ - ------------ - ---- ----------------- ----- ------ - ---------------------------------- ----- ---------- - ----------------- ------------- ---------------- ------------------ ----------------- -- - ----------------- ---
在上面的代码中，我们从 canvas 元素中的 mousemove 事件创建了一个 Observables，然后使用 throttleTime 操作符来限制事件处理程序的执行次数。指定时间长度为 1000ms，因此在这段时间内，如果触发多个鼠标移动事件，只有第一个事件会被处理。
audit 操作符
audit 操作符是另一种限制 Observables 输出的操作符。与 throttle 相反，audit 会在每个特定间隔内发射最后一个 Observables。当等待时间已过后，它将再次接受下一个 Observable 并忽略在这个时间窗口内的其他 Observables。
以网络请求为例，如果我们想要将 2 秒内发生的多个 API 请求合并成一个，请看下面的代码：
-- -------------------- ---- ------- ------ - ----- -------- - ---- ------- ------ - ----- - ---- ----------------- ------ ----- ---- -------- ----- ------ - --------------------------------------------- ----- ------ - ------------------------ ----- --------- - --------------- ------------ -------- -- ---------- -------------------- -- - --------------------------- ---
在上面的代码中，我们使用了 audit 操作符来限制我们的 API 请求。我们首先从 axios.get() 方法创建一个 Observables，然后使用 audit 操作符来指定一个间隔 Observable。在本例中，我们使用了一个 interval，它发射一个值，然后等待 2 秒钟，发射下一个值，并将其传递给 audit 操作符。在 audit 操作符内部，只有最后一个请求会被发出，也就是在 2 秒时间段内最后一个请求。
结论
RxJS 的 throttle 和 audit 操作符为我们提供了方便的方法，使我们可以轻松地限制 Observables 的输出。它们可帮助我们减少 API 请求的频率，也可帮助我们控制用户界面的输入。
我们可以根据项目的需要选择合适的操作符。throttle 适合要求在一段时间里只执行资源消耗大的任务的场景，比如文本输入自动提示；audit 适合需要合并最后几个触发的操作的场景，比如 UI 动画，API 请求。
学习建议
从实践出发，让你快速掌握 RxJS 中 throttle 和 audit 操作符的使用，可以：
通过阅读官方文档来了解如何在 RxJS 中使用这两个操作符。
练习使用这些操作符来控制 Observable 的输出。
参考相关示例代码，深入理解 throttle 和 audit 操作符的作用和使用方法。
希望你在 RxJS 的学习路上，使用这些技巧时更加轻松流畅。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6733b7890bc820c582440469