在前端开发中，经常会遇到异步操作，比如定时器等。而传统的使用 setTimeout 或 setInterval 进行异步操作经常会出现一些问题，比如在页面销毁时没有及时清除定时器。为了更好地管理异步操作，我们可以采用 RxJS 中的一些工具。
RxJS 简介
RxJS 是 ReactiveX 的 JavaScript 实现，它采用观察者模式（Observer/Subscriber）来处理异步操作。RxJS 提供了一系列的工具，比如 Observable、Subject、BehaviorSubject、ReplaySubject 等，可以更方便地处理异步操作。
在 RxJS 中，我们可以使用 Observable 来创建一个异步数据流，而观察者则可以订阅这个数据流，以便在数据流中出现数据时被通知。同时，RxJS 还提供了很多操作符，比如 filter、map、distinctUntilChanged、throttleTime 等，可以帮助我们对数据流进行过滤、映射、去重等操作。
RxJS 中的定时器
在 RxJS 中，提供了类似传统 setTimeout 和 setInterval 的定时器，分别是 timer 和 interval。
timer
timer 接受三个参数，第一个参数是延时时间，第二个参数是间隔时间，第三个参数是调度器。
import { timer } from 'rxjs';
// 延时 1s 后开始每 2s 执行
const source = timer(1000, 2000);
const subscription = source.subscribe(val => console.log(val));interval
interval 接受一个参数，表示间隔时间。
import { interval } from 'rxjs';
// 每 1s 执行一次
const source = interval(1000);
const subscription = source.subscribe(val => console.log(val));需要注意的是，由于 RxJS 中的定时器是只有在订阅后才会执行的，所以我们需要手动取消订阅才能停止定时器。
比如上面的例子，我们可以在页面销毁时取消订阅。
-- -------------------- ---- -------
------ - -------- - ---- -------
------ - --------- - ---- -----------------
----- ----------- -
------- ------------- -------------
------- --------- - --- ----------
---------- -
----- ------ - ---------------
----------------- - ------------
-------------------------
--------------- -- ------------------
-
------------- -
----------------------
--------------------------
--------------------------------
-
-RxJS 中的倒计时
除了定时器，RxJS 还提供了一个 countdown 工具，可以用来进行倒计时。
-- -------------------- ---- -------
------ - ------ ------ ----- - ---- -------
------ - ---- --------- - ---- -----------------
-------- ---------------- ------- -
------ ------
-------- -----------
----- -- ----- - - - ---
----------- -- - -- --
--
-------
--
-
-- --- --
----- ------ - -------------
----- ------------ - -------------------- -- ------------------需要注意的是 countdown 函数中使用了 never 工具，它表示一个永远不会结束的数据流。这样可以保证倒计时数据流不会在倒计时结束前被取消订阅。
RxJS 中的延时器
除了定时器和倒计时，RxJS 还提供了延时器 delay。
import { of } from 'rxjs';
import { delay } from 'rxjs/operators';
const source = of('hello world').pipe(
delay(1000)
);
const subscription = source.subscribe(val => console.log(val));上述代码中，我们使用 of 创建了一个包含 'hello world' 的 Observable，然后使用 delay 延时 1s 后才会发送数据。
需要注意的是，由于 delay 是用于延时数据流的发送时间，它并不会影响订阅和取消订阅时的操作。因此，在使用 delay 时需要特别注意订阅和取消订阅的时机。
总结
在 RxJS 中，我们可以使用 timer、interval、countdown 和 delay 等工具替换传统的 setTimeout 和 setInterval。这些工具都是基于观察者模式进行设计的，能够方便地管理异步操作，并提供了很多操作符，可以更方便地处理异步数据流。
需要注意的是，在使用 RxJS 中的定时器时，我们需要手动取消订阅才能停止定时器；在使用 delay 延时器时，需要注意订阅和取消订阅的时机。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c9f3395ad90b6d0418c7f6