RxJS 中的 interval 和 timer 操作符-JavaScript中文网-JavaScript教程资源分享门户

RxJS 是 React 开发中使用的一种基于反应式编程模式的库，旨在简化代码的异步处理。而 interval 和 timer 操作符则是 RxJS 中两个特别有用的用于创建observables的函数。

interval

interval 操作符用于创建一个在指定时间间隔内不断发出递增的数字序列的observable。

import { interval } from 'rxjs';

const observable = interval(1000);

observable.subscribe(x => console.log(x));

以上代码会每隔1秒在控制台输出递增的数字。

interval 运行出来的observable会不断地发出数字，直到其被取消订阅。

timer

RxJS 中的 timer 操作符则可用于创建一个在指定时间后发出单个值的observable。可以通过指定延迟时间和发出的值来创建一个新的observable。

import { timer } from 'rxjs';

const observable = timer(3000, 1000);

observable.subscribe(x => console.log(x));

timer 操作符会在延迟3秒后开始发出数字序列，每1秒递增1。

区别

很明显， interval 发出的时无限序列并且一直发出直到被取消订阅，而 timer 只发出指定个数的值或者等时间到了就结束并发送 complete 信号。

普遍应用

interval 和 timer 操作符背后的思想和应用是类似的，不同之处在于它们的行为有本质的区别。

常见的应用场景如下：

Polling: 定期轮询获取最新数据。

import { interval } from 'rxjs';
import { switchMap } from 'rxjs/operators';

interval(1000)
  .pipe(
    switchMap(() => this.http.get('/data'))
  )
  .subscribe(data => console.log(data));

Debounce Time: 等待一段时间减少重复操作。

// javascriptcn.com 代码示例
import { fromEvent } from 'rxjs';
import { debounceTime, tap } from 'rxjs/operators';
 
const clicks$ = fromEvent(document, 'click');
 
clicks$.pipe(
  debounceTime(1000),
  tap(ev => console.log('EVENT AFTER DEBOUNCE', ev))
).subscribe();

Delay: 将一个流中的值推迟相应时间。

import { fromEvent, pipe } from 'rxjs';
import { delay } from 'rxjs/operators';

const click$ = fromEvent(document, 'click');

click$.pipe(
  delay(2000)
).subscribe(e => console.log(e));

总结

在React中，interval 和 timer 操作符是RxJS中常用于处理异步操作的两种方法之一。它们可以用于轮询、防抖动，延迟发送等场景。通过学习和使用这两个操作符，可以极大的提高对异步流的控制能力。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65399ab87d4982a6eb2f945c