RxJS 是一个流行的 JavaScript 库，它使得异步编程更加简单和可维护。RxJS 通过一系列的操作符来组成，其中一个非常有用的操作符是 takeUntil。
takeUntil 操作符用于确定 Observable 在何时停止发送值。它需要另一个 Observable 作为参数，并在该 Observable 发出值时停止原始 Observable 的值的发射。
如何使用 takeUntil
使用 takeUntil 操作符非常简单。首先，需要一个来源 Observable 和一个“直到” Observable。
-- -------------------- ---- ------- ------ - --------- ----- - ---- ------- ------ - --------- - ---- ----------------- -- ---- -------- ------------------- ----- ------ - --------------- -- ---- ----- ------------ ----- ----- ------- - ------------ -- - ------- ------ ------ ---------- --- ----- ------ - -------------------------------- ------------------ -- ----------------
在上面的例子中，interval 创建了一个每秒发射一次数字的 Observable。timer 创建了一个在 5 秒后发出值的 Observable。
使用 takeUntil 操作符可以将 source Observable 在 5 秒后停止发出值。
示例代码
接下来，我们来看一个更加具体的例子。
在这个例子中，我们将使用 takeUntil 操作符实现一个自动完成搜索的功能。
首先，我们在 HTML 中添加一个输入框和一个搜索结果容器。
<div> <input type="text" id="search-input" placeholder="Search..."> </div> <div> <ul id="search-results"></ul> </div>
然后在 JavaScript 中，我们可以监听输入框的键盘事件，并将键入的字符作为字符串传递给搜索函数。
-- -------------------- ---- -------
------ - ----------- --------- - ---- -------
------ - ------------- --------------------- ---------- --------- - ---- -----------------
------ - ------ - ---- -----------
----- ----------- - --------------------------------------- -- -----------------
----- ------------- - ----------------------------------------- -- -----------------
----- ------------ - ---------------------- --------------
------------------
-----------------------
------------ -- -
----- ---------- - -------------------------
------ ---------- - ------------------ - ---
--
--
----- -------- - ---------------------- --------------------------------------
-------------------------------- --------- -- -
-----------------------
---
-------- ---------------------- --------- -
----------------------- - ----------------- -- ------------------------------
-在上面的代码中，我们使用 fromEvent 创建一个输入框的键盘事件 Observable。
使用 debounceTime 去除输入框连续输入时的干扰，使用 distinctUntilChanged 去除输入框内容相同的重复搜索。
使用 switchMap 将键入的字符串发送给 search 函数，并返回结果数组。
使用 takeUntil 使得 searchInput$ 在输入框失焦时停止发出值。
最后在 subscribe 中将匹配到的字符串渲染在搜索结果容器中。
总结
通过使用 takeUntil，我们可以简单而优雅地在需要停止 Observable 时关闭流操作。本文介绍了 takeUntil 的基本使用和一个自动完成搜索的例子。希望能够帮助你更好地掌握 RxJS。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450e0cf980a9b385b9c25be