在前端开发中，我们常常需要使用定时器来处理一些周期性的任务，比如轮播图或文字滚动。setInterval 和 setTimeout 都是常用的定时器函数，可以很方便地解决这类问题。但是，当我们需要取消这些定时器时，就会发现问题很棘手了。本文将介绍如何使用 RxJS 中的 interval 操作符创建可取消的定时器，以解决这个难题。
理解 interval 操作符的工作原理
在学习如何创建可取消的定时器之前，我们需要先了解一下 interval 操作符的工作原理。interval 是 RxJS 中的一个操作符，类似于 setInterval，在指定的时间间隔内发出值。下面是一个简单的示例：
import { interval } from 'rxjs';
const source$ = interval(1000);
source$.subscribe(value => {
console.log(value);
});上面的代码中，我们使用 interval 创建一个 Observable，每隔 1 秒钟就会向 Observer 发出一个值。这个 Observable 会一直执行，除非我们手动取消它。
RxJS 中的 interval 操作符背后其实是使用了 setInterval。不过与原生的 setInterval 不同的是，interval 返回的是一个 Observable，可以使用 RxJS 的许多操作符对它进行处理。
创建可取消的定时器
RxJS 中的 interval 不仅仅是定时器，它也是一个 Observable，因此可以使用许多操作符来对它进行处理。在 interval 的基础上，我们可以添加一些操作符，使定时器可以被取消或重置。
通过 takeUntil 操作符取消定时器
takeUntil 操作符用于在传入的 Observable 发出值之后，终止源 Observable。如果我们将一个异步任务转换为 Observable，并且希望在某个条件成立时取消这个任务，那么 takeUntil 的用法就非常适合。
下面是一个使用 takeUntil 取消定时器的示例：
-- -------------------- ---- ------- ------ - --------- ------- - ---- ------- ------ - --------- - ---- ----------------- ----- ------- - --------------- ----- ------- - --- ---------- ------------- ------------------ ----------------- -- - ------------------- --- -- ----- ---------------
上述代码中，我们使用 takeUntil 操作符封装了 source$ Observable，传入了一个 cancel$ Subject。当我们需要取消定时器时，只需要调用 cancel$ 的 next 方法就可以了。
通过 switchMap 操作符重置定时器
switchMap 用于将 Observable 转换成另一个 Observable。当源 Observable 发出值时，switchMap 会取消之前的内部 Observable，并启动一个新的内部 Observable，以此来“重置”定时器。
下面是一个使用 switchMap 重置定时器的示例：
-- -------------------- ---- ------- ------ - --------- ------- - ---- ------- ------ - --------- - ---- ----------------- ----- ------ - --- ---------- ----- ------- - ------------ ------------ -- --------------- -- ----------------------- -- - ------------------- --- -- ----- --------------
上述代码中，我们使用 switchMap 将 reset$ Subject 转换成了一个 interval Observable。当我们需要重置定时器时，只需要调用 reset$ 的 next 方法即可。
总结
本文介绍了如何使用 RxJS 中的 interval 操作符创建可取消的定时器。通过使用 takeUntil 和 switchMap 操作符，我们可以轻松地取消或重置定时器。RxJS 中的操作符非常强大，熟练掌握这些操作符可以让我们写出更加简洁、高效的异步代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a4d1ae48841e98941362fb