简介
RxJS 是一种响应式编程库，它提供了一种方便的方式来处理异步和基于事件的编程。时间窗口操作是 RxJS 提供的一个强大的功能，可以让开发者在一个时间段内处理事件流的数据。
时间窗口是一种将流中的事件分组的操作，它可以帮助我们处理事件流中的数据，比如将最近的事件组成一个数组，或者只处理最近一段时间内的事件。时间窗口操作可以帮助我们实现以下一些功能：
- 对流中的数据进行分组
- 窗口可以根据时间长度定期开启和关闭
- 可以对窗口进行滑动操作，以便处理重叠部分的数据
本文将详细介绍 RxJS 中的时间窗口操作，并以实际情景演示用例。
创建时间窗口
RxJS 中有多种方法创建时间窗口，其中包括 buffer、window 和 windowTime 等：
buffer
buffer 操作符可以将源 Observable 发出的值收集起来，并返回一个包含这些值的数组。我们可以通过传入另一个 Observable 参数来确定 buffer 的发出时机。
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ - ------ - ---- ----------------- ----- ------ - --------------- ----- ------- - --------------- ----- ------- - ----------------------------- --------------------- -- ------------------------ ------
上述代码中，我们创建了一个每隔 1 秒发出一次值的 Observable，同时也创建了一个每隔 5 秒发出一次值的触发器 Observable。我们将这两个 Observable 传入 buffer 操作符中，这样就可以每隔 5 秒将最近的值打包成一个数组发出。
window
window 操作符可以类比 buffer 操作符，返回的是一系列 Observables，每个 Observable 包含源 Observable 最近发出的值的信息。我们也可以通过传入另一个 Observable 参数来确定触发窗口关闭的条件。
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ - ------ - ---- ----------------- ----- ------ - --------------- ----- --------------- - --------------- ----- ------- - ------------------------------------- --------------------- -- - ---------------- ------ ---------- --------------- -- ------------------- -------- ---- ---
上述代码中，我们创建了一个每隔 1 秒发出一次值的 Observable，同时也创建了一个每隔 5 秒发出一次值的触发器 Observable。我们将这两个 Observable 传入 window 操作符中，这样就可以每隔 5 秒创建一个新的窗口，并将最近的值作为 window 的值。
windowTime
windowTime 操作符与 window 操作符类似，但是我们可以指定窗口的时间长度，将源 Observable 中的值收集并分组。
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ - ---------- - ---- ----------------- ----- ------ - --------------- ----- ------- - ------------------------------ --------------------- -- - ---------------- ------ ---------- --------------- -- ------------------- -------- ---- ---
上述代码中，我们创建了一个每隔 1 秒发出一次值的 Observable，并将其传入 windowTime 操作符中，指定窗口时长为 5 秒。这样就可以每隔 5 秒创建一个新的窗口，并将最近的 5 秒内的值作为窗口的值。
窗口的滑动
我们可以使用 window 操作符中的一些变体来控制窗口的滑动。例如可以使用 windowToggle、windowWhen 操作符来指定何时开启和关闭窗口。
windowToggle
windowToggle 操作符可通过切换任何 Observable 的信号来跟踪窗口的打开和关闭。它需要两个 Observable 参数，一个 Observable 指定窗口开始，另一个 Observable 指定窗口关闭。
-- -------------------- ---- ------- ------ - --------- --------- - ---- ------- ------ - ------------ - ---- ----------------- ----- ------ - --------------- ----- ----------- - ------------------- --------- ----- ------- - ------------ ------------------------- -- -- --------------- -- --------------------- -- - ---------------- ------ ---------- --------------- -- ------------------- -------- ---- ---
上述代码中，我们创建了一个每隔 1 秒发出一次值的 Observable，并将其传入 windowToggle 操作符中，指定开启窗口的 Observable 为 clickToggle，关闭窗口的 Observable 为每隔 4 秒 emit 一次值的 Observable。这样就可以通过单击页面来开启新的窗口，并随着时间的推移关闭窗口。
windowWhen
windowWhen 操作符可以使用一个函数来指定窗口何时打开。这个函数返回另一个 Observable，每当这个 Observable 发出一个值时，窗口就会打开。例如，我们可以使用 windowWhen 来在满足特定条件时打开窗口。
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ - ---------- - ---- ----------------- ----- ------ - --------------- ----- -------- - -- -- --------------- ----- ------- - ---------------------------------- --------------------- -- - ---------------- ------ ---------- --------------- -- ------------------- -------- ---- ---
上述代码中，我们创建了一个每隔 1 秒发出一次值的 Observable，并将其传入 windowWhen 操作符中，指定开启窗口的 Observable 为 notifier 函数返回的 Observable，每隔 5 秒发出一个值。这样就可以每隔 5 秒创建一个新的窗口。
示例
以下是一个复合应用程序的示例，它使用时间窗口操作符，将最近五秒钟内通过 DOM 事件生成的单击事件收集在一起。
-- -------------------- ---- -------
------ - ---------- -------- - ---- -------
------ - ------- ------- ---- ---- ---------- - ---- -----------------
----- ------ - ------------------- ---------
----- ------ - ----------------------------------
----- ----- - --- ----------------
------------
----- -- -------------
----- -- -
-------------------- ------- ---
--------------
---
-----------------
------ -- -
--------------------- ---------
---
------ -- -
----------------------------
------ --------------- --------------
---
-------------- -- -
----------------------- ---------
------ -------------- - --
--
------------------- -- -
----- ------ - -------------------- -- -- --- - ---------------- ----
---------------------- --------
---------------- - ---------------------
---我们创建了一个从文档中单击事件流中获取时间戳的 Observable，并将其传入 windowTime 操作符中，指定窗口时长为 5 秒钟。然后使用 map 操作符启动 buffer 操作符，在窗口里面捕获单击事件时间数组。filter 操作符用于确保结果数组非空，以便在代码中生成一些输出。
总结
时间窗口操作是 RxJS 中非常强大的一种分组和处理事件流数据的方式。RxJS 支持多种方式创建时间窗口，包括 buffer、window 和 windowTime 等，通过这些操作符，可以很方便的对事件流进行分段处理，而在实际开发中，也需要根据场景的不同，选择合适的时间窗口操作符，进行更加灵活的编程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a785a248841e989440776a