前言
RxJS 是一款强大的响应式编程库，在前端领域拥有广泛的应用。本文将教授如何使用 RxJS 实现倒计时功能，实时刷新总时间与已经使用的时间，并提供示例代码。
RxJS 基础知识
在使用 RxJS 实现倒计时前，需要了解一些 RxJS 基础知识，如：
Observable （可观察对象）：观察对象（observable）是我们观察值 （value）变化的地方。使用 Observables，我们可以观察各种各样的值，如用户输入、AJAX 响应等。
Subjects（主题）：在 RxJS 中，Subject 是一种特殊的 Observable。它允许将值多路复用给多个 Observers。
Operators（操作符）：操作符是 RxJS 中的功能特性。它们用于转换、过滤、映射、组合和聚合 Observables。RxJS 支持的操作符非常丰富，可以随时根据需求去使用。
实现倒计时
接下来，我们使用 RxJS 实现倒计时功能。
创建一个 Observable 对象
首先，我们需要创建一个 Observable 对象来观察倒计时。Observable 对象我们可以使用 RxJS 的 interval 操作符，它每隔给定的时间间隔触发一次。
import { interval } from 'rxjs';
const time$ = interval(1000); // 每隔1秒触发倒计时计算
下一步，我们需要对 Observable 中的值进行处理，计算倒计时的时间。
import { interval } from 'rxjs';
import { map, scan, takeWhile } from 'rxjs/operators';
const time$ = interval(1000).pipe(
map(second => 60 - second), // 计算剩余时间
scan((acc, curr) => curr > 0 ? curr : 0, 60), // 取值范围[0,60]
takeWhile(time => time >= 0) // 倒计时完成条件
);上面代码中，我们使用 map 操作符计算剩余时间，使用 scan 操作符对时间进行取值范围的限制（保证时间范围在 [0,60]）。最后使用 takeWhile 操作符设定倒计时结束条件（时间小于 0 时结束）。
刷新计时器
接下来，我们需要为模板添加一个计时器，并实现每秒钟刷新计时器的功能。我们使用 RxJS 中的 Subject 对象来完成这一步骤。使用 next 操作符将时间值发送到 Subject 中，然后使用 subscribe 操作符订阅 Subject 中的变化，并实现计时器的刷新。
-- -------------------- ---- ------- ------ - --------------- - ---- ------- ----- ------------ - --- -------------------- ------------------------------ -- ----- --------------------------- -- - ----- ----- - --------------------------------- ----------------- - --------------------------------- ------- ---
在上面代码中，我们使用 BehaviorSubject 对象来保存倒计时的初始值。然后使用 subscribe 操作符将 Observable 和 Subject 进行关联，并将时间值发送到 Subject 中。最后，我们使用 subscribe 操作符监听 Subject 中的值变化，并实现了实时刷新计时器的功能。计时器的 Html 标签如下所示：
<p id="timer">00:60</p>
实现按钮功能
最后，我们需要添加一个按钮，实现倒计时的启动和停止。
-- -------------------- ---- -------
----- ----------- - ---------------------------------
----- ---------- - --------------------------------
--- -------------
------------------------------------- -- -- -
------------ - --------------------------- -- -
----- ----- - ---------------------------------
----------------- - --------------------------------- -------
---
---
------------------------------------ -- -- -
---------------------------
---------------------- -- ----------
---上面代码中，我们添加了两个按钮：开始按钮和停止按钮。在开始按钮被点击后，我们创建了一个订阅，并使用 subscribe 操作符进行关联，实现了启动倒计时的功能。在停止按钮被点击后，我们取消订阅并重新设置了计时器的初始值。
总结
在本文中，我们使用 RxJS 实现了倒计时功能。通过基础的 Observable、Subject 和操作符，我们实现了实时刷新的计时器，以及启动和停止倒计时的功能。使用 RxJS 对于实现复杂的任务和功能具有很大的优势，特别是在处理异步数据方面。RxJS 是一个非常值得学习和使用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6472ce8c968c7c53b0061a77