RxJS 是一个基于观察者模式的 JavaScript 库，用于建立异步和基于事件的程序。它提供了许多强大的操作符，其中有一些是时间相关的操作符，即可用于处理与时间相关的数据流。这些时间相关的操作符包括 delay、timeout 和 timeInterval。
delay 操作符
delay 操作符可以将每个事件推迟一段时间再发出，这个时间可以是一个固定值或者是一个函数返回值。
示例代码
import { of } from 'rxjs'; import { delay } from 'rxjs/operators'; const source$ = of('1', '2', '3').pipe( delay(1000) // 推迟 1000ms ); source$.subscribe(console.log); // 输出 1, 2, 3
详解
在上面的例子中，我们推迟了源 Observable 的发射时间 1000ms，这就意味着在订阅源 Observable 后，会等待 1000ms 才会开始接收事件。因此，我们在控制台中看到的输出结果是在 1000ms 后输出的。
除了数字值之外，你还可以传递一个返回数字值的函数，比如：
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ----- - ---- ----------------- ----- --------- - -- -- ------------------------ - ----- - ----- -- -- ---- - ---- ------- ----- ------- - ------- ---- ---------- ---------------- -- -------------------------------展开代码
在这个例子中，我们定义了一个返回值为 1000 - 6000 之间的一个数字的函数，这个函数将作为 delay 操作符的参数，用于推迟每个事件的发射时间。
timeout 操作符
timeout 操作符可以用于设置超时时间。如果源 Observable 在指定的时间内没有发射任何事件，那么 timeout 操作符将会抛出一个错误。
示例代码
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ------- - ---- ----------------- ----- ------- - ------- ---- ---------- ------------- -- ------- ------ -- ------------------- ----- ------------ ------ ------------- -- -- ------------ ---展开代码
在这个例子中，我们使用 timeout 操作符设置了一个超时时间为 3000ms。因为源 Observable 发出了事件，所以在订阅时会输出 1, 2, 3。但是，如果源 Observable 在 3000ms 内没有发出任何事件，那么 timeout 操作符将会抛出一个 TimeoutError 错误。
详解
timeout 操作符提供了多种配置方法，可以用于设置不同的超时逻辑。比如，你可以设置一个 selector 函数，它用于返回另一个 Observable。如果这个 Observable 在指定的时间内还没有发出任何事件，那么 timeout 操作符将会抛出一个错误。这个例子中的 selector 函数可以看作是一个计数器。
-- -------------------- ---- ------- ------ - -- - ---- ------- ------ - ------- - ---- ----------------- ----- ------- - ------- ---- ---------- --------- ------ ----- -- -------- ------ -- ----- ----- -- ------------ ------ ----- -- -- -------------- -- ---------- ------------- ------ ------ -- -- ------------------- ----- ------------ ------ ------------- -- -- ------------ ---展开代码
在这个例子中，我们为 timeout 操作符提供了一个 selector 配置函数。首先，第一个事件必须在 1000ms 之内发射，如果没有发射，那么 timeout 操作符将会抛出一个错误。然后，每个事件的间隔时间为 2000ms，也就是说，timeout 操作符会监视第一个事件和第二个事件之间的间隔时间，如果超过 2000ms，那么就会抛出一个错误。最后，我们为 selector 函数提供了一个新的 Observable，每隔 1000ms 发出一个事件。
timeInterval 操作符
timeInterval 操作符可以插入一个时间戳到事件流中，这个时间戳用于表示发射这个事件流的时间和上一个事件流的时间之间的差值。
示例代码
-- -------------------- ---- ------- ------ - -------- - ---- ------- ------ - ----- ------------ - ---- ----------------- ----- ------- - -------------------- -------- -- --- - --- -------------- -- ----- -- -------------------------------展开代码
在这个例子中，我们创建了一个 interval Observable，每隔 1000ms 发出一个自增的数字。我们使用 take 操作符只订阅前 5 个事件，并使用 timeInterval 操作符插入一个时间戳。最后，我们在控制台中输出了每个事件和它们的时间间隔。
详解
timeInterval 操作符还提供了一个可选的 scheduler 参数，用于指定计时器的调度器。这个可选参数的使用方法和其他带有 scheduler 的操作符一样。例如，可以使用 asapScheduler 来使得时间戳的计算在下一个微任务调度中执行。
-- -------------------- ---- ------- ------ - --------- ------------- - ---- ------- ------ - ----- ------------ - ---- ----------------- ----- ------- - -------------- -------------------- -------- --------------------------- -- -- ------------- --- -- -------------------------------展开代码
这个例子中，我们使用了 asapScheduler 调度器，它会在下一个微任务中执行，因此，虽然源 Observable 设置了 1000ms 的计时器，但时间戳的计算会比源 Observable 的发射要更快一些，这也是 asapScheduler 的特点之一。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67bee2ae0c976d473a336684
