在前端开发中，我们经常需要定期执行一些操作，比如轮询后端接口、定时刷新页面等等。而 RxJS 中的 interval 操作符可以帮助我们实现这样的定时操作。本文将介绍如何在 RxJS 中正确地使用 interval 操作符进行定时操作。
interval 操作符的基本用法
interval 操作符可以创建一个 Observable，它会在指定的时间间隔内产生连续的数字。它的基本用法如下：
import { interval } from 'rxjs';
const source$ = interval(1000); // 每秒产生一个数字
source$.subscribe(console.log); // 输出 0, 1, 2, 3, ...上面的代码中，我们使用 interval(1000) 创建了一个每秒产生一个数字的 Observable，然后通过 subscribe 订阅了这个 Observable 并输出了产生的数字。
interval 操作符的注意事项
使用 interval 操作符时，有一些注意事项需要注意。
interval 会一直产生数字，需要手动取消订阅
interval 操作符会一直产生数字，直到手动取消订阅为止。因此，在使用 interval 操作符时，一定要记得手动取消订阅，否则会一直占用内存资源。
import { interval } from 'rxjs';
const source$ = interval(1000); // 每秒产生一个数字
const subscription = source$.subscribe(console.log); // 输出 0, 1, 2, 3, ...
setTimeout(() => {
subscription.unsubscribe(); // 取消订阅
}, 5000); // 5 秒后取消订阅上面的代码中，我们使用 setTimeout 在 5 秒后取消了订阅。
interval 会在产生数字时阻塞代码执行
使用 interval 操作符时，需要注意它会在产生数字时阻塞代码执行。因此，在使用 interval 操作符时，一定要避免在 subscribe 中执行耗时的操作。
-- -------------------- ---- -------
------ - -------- - ---- -------
----- ------- - --------------- -- --------
-------------------- -- -
------------------------
-- ------
--- --- - --
--- ---- - - -- - - ----------- ---- -
--- -- --
-
------------------------
---上面的代码中，我们在 subscribe 中执行了一个耗时的操作，这会导致 interval 在产生数字时阻塞代码执行，从而影响程序的响应速度。
interval 操作符的高级用法
除了基本用法外，interval 操作符还可以结合其他操作符进行更加高级的定时操作。
使用 takeUntil 操作符取消定时操作
使用 takeUntil 操作符可以在指定的条件满足时取消定时操作。比如，我们可以在用户点击按钮时取消定时操作。
-- -------------------- ---- ------- ------ - --------- --------- - ---- ------- ------ - --------- - ---- ----------------- ----- ------- - --------------- -- -------- ----- ------ - --------------------------------- ----- ------ - ----------------- --------- ------------- ----------------- ------------------------- -- -- -- -- -- -- ---
上面的代码中，我们使用 fromEvent 创建了一个点击按钮的 Observable，然后使用 takeUntil 操作符将 interval 的产生数字操作与点击按钮的操作关联起来。当用户点击按钮时，takeUntil 操作符会将 interval 的产生数字操作取消掉。
使用 concatMap 操作符延迟定时操作
使用 concatMap 操作符可以在前一个 Observable 完成后再执行下一个 Observable。比如，我们可以在每秒产生一个数字后，等待 2 秒后再次产生数字。
import { interval } from 'rxjs';
import { concatMap, delay } from 'rxjs/operators';
const source$ = interval(1000); // 每秒产生一个数字
source$.pipe(
concatMap(num => interval(1000).pipe(delay(2000)))
).subscribe(console.log); // 产生数字的间隔为 3 秒上面的代码中，我们使用 concatMap 操作符将每秒产生一个数字的 Observable 转换为每 3 秒产生一个数字的 Observable。
总结
使用 interval 操作符可以帮助我们实现定时操作。在使用 interval 操作符时，需要注意手动取消订阅和避免阻塞代码执行。除了基本用法外，还可以结合其他操作符进行更加高级的定时操作，比如使用 takeUntil 操作符取消定时操作和使用 concatMap 操作符延迟定时操作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66150e74d10417a22255f6a4