操作符 - 时间操作符

优质

小牛编辑

142浏览

2023-12-01

这可不是一个简单的话题。其中涉及了应用程序中的诸多领域，你可能想要同步 API 的响应，或者你想要处理其它类型的流，比如 UI 中的点击事件或键盘事件。

有大量的操作符以它们各自的方式来处理时间，比如 delay、 debounce、 throttle、 interval，等等。

interval

这个操作符用来创建一个 Observable，基本上它所做的就是按固定的时间间隔提供值，函数签名如下：

Rx.Observable.interval([ms])

示例用法:

Rx.Observable.interval(100)
// 无限生成下去

因为这个操作符会不停地生成值，所以倾向于和 take() 操作符一起使用，这样可以在调用它之前限制生成值的数量，就像这样：

Rx.Observable.interval(1000).take(3)
// 生成 1,2,3

timer

timer 是个有趣的操作符，它可以有多种行为，这取决于你如何使用它。它的函数签名是

Rx.Observable.timer([initial delay],[thereafter])

然后只有第一个参数是必须的，所以取决于使用参数的数量，它会有不同的用法。

一次性的

let stream$ = Rx.Observable.timer(1000);
stream$.subscribe(data => console.log(data));
// 1秒后生成0

这样就是一次性的，因为并没有规定何时发出下一个值。

指定第二个参数

let moreThanOne$ = Rx.Observable.timer(2000, 500).take(3);
moreThanOne$.subscribe(data => console.log('timer with args', data));
// 2秒后生成0，然后再500毫秒后生成1，然后再500毫秒生成2

这样更灵活一些，会根据第二个参数持续性的发出值。

delay

delay() 操作符只是简单地延迟每个要发出的值，它是这样使用的：

var start = new Date();
let stream$ = Rx.Observable.interval(500).take(3);
stream$
.delay(300)
.subscribe((x) => {
    console.log('val',x);
    console.log( new Date() - start );
})
// 800毫秒左右后输出 0 , 1300毫秒左右后输出1, 1800毫秒左后后输出2

业务场景

delay 操作符可以在很多地方使用，但其中一个很好的场景是错误处理，尤其是当网络不稳定时我们想要在x毫秒后重试整个流：

想了解更多，请阅读错误处理章节

sampleTime

我通常认为这个场景可以称之为“懒得理你”。我的意思是事件只会在特定的时间点被触发。

业务场景

所以在x毫秒内的忽略事件的能力是非常有用的。想象一下，一个保存按钮被狂点N次，只在x毫秒后只有最近的一次点击生效而忽略其它的点击不是很好吗？

const btn = document.getElementById('btnIgnore');
var start = new Date();
const input$ = Rx.Observable
  .fromEvent(btn, 'click')
  .sampleTime(2000);
input$.subscribe(val => {
  console.log(val, new Date() - start);
});

上面的代码所做的就是这件事。

debounceTime

debounceTime() 操作符会告诉你：我只会以一定的时间间隔发出数据，而不会一直发出数据。

业务场景

Debounce 是一个已知的概念，特别是当你敲击键盘的时候。就像是在说，我们不在乎你的每次敲击键盘，但是一旦你停止打字后的一段时间是我们所关心的。一个普通的 auto complete (自动完成/智能提示) 就应该在这个时候开始启动了。如果说你的用户停止打字已经有x毫秒了，通常这意味着我们应该执行一次 ajax 调用并取回结果。

const input = document.getElementById('input');
const example = Rx.Observable
  .fromEvent(input, 'keyup')
  .map(i => i.currentTarget.value);
// 在两次敲击键盘事件之间，有0.5秒的等待时间，如果时间小于0.5秒则丢弃前一个敲击键盘事件
const debouncedInput = example.debounceTime(500);
const subscribe = debouncedInput.subscribe(val => {
  console.log(`Debounced Input: ${val}`);
});

上面的代码只会输出一个值，值来源于 input 表单，在你停止打字后的500毫秒后，才值得它报告一下，也就是发出一个值。

throttleTime

TODO

buffer

buffer 操作符的能力是在输出它的值前记录x个发出的值，它可以使用一个或两个参数。

.buffer( whenToReleaseValuesStartObservable )
或
.buffer( whenToReleaseValuesStartObservable, whenToReleaseValuesEndObservable )

那么这意味着什么呢？它的意思是，如果我们有一个点击流的话，可以将其我切成漂亮的小块流，每一小块流包含的事件的数量都是相同的。使用一个参数的话，我们可以给它一个时间参数(译者注: 这里说时间参数可能不太准确，会让人联想到500毫秒这样的参数，应该是时间相关的 Observable，比如 interval 操作符生成的)，假设是500毫秒。所以原本要发出的值会积攒500毫秒后发出，然后另一个 Observable 会开启，老的 Observable 则被抛弃。这很像是在使用秒表，一次记录500毫秒。示例：

let scissor$ = Rx.Observable.interval(500)
let emitter$ = Rx.Observable.interval(100).take(10) // 总共会输出10个值
.buffer( scissor$ )
// 500毫秒后输出: [0,1,2,3,4]  1秒后输出: [5,6,7,8,9]

弹珠图

--- c --- c - c --- >
-------| ------- |- >
结果流是 :
------ r ------- r r  -- >

业务场景

那么 buffer 的业务场景到底是什么？那就是双击，对单击作出响应显然是很简单的，但如果只想对双击或是三连击进行处理，又应该如何用代码来处理呢？你可能会用类似下面的方法来处理：

$('#btn').bind('click', function(){
  if(!start) { start = timer.start(); }
  timePassedSinceLastClickInMs = now - start;
  if(timePassedSinceLastClickInMs < 250) {
     console.log('double click');
  } else {
     console.log('single click')
  }
  start = timer.start();  
})

看下上面的伪代码。关键是你需要记录一些在点击之间的时间变量。这样的代码缺乏优雅性，不能算是一种好的代码

在 RxJS 中建模

到目前为止，对于 RxJS 我们所知道的一切都是关于流和随着时间的推移对值进行建模。点击没什么不同，它们也是随着时间的推移而产生。

---- c ---- c ----- c ----- >

然而，我们关心的是短时间内接连出现的点击，即像下面这样的双击或三连击：

--- c - c ------ c -- c -- c ----- c

从上面的流中你应该可以推断出发生了一次双击、一次三连击和一次单击。

假设我就是这么做的，那么然后呢？你希望流自己分组，以便告诉我们这一点，即需要将哪些点击作为一个组发出。filter() 操作符可以帮我们完成任务。如果我们定义了一个足够长的时间(假设是300毫秒)来收集事件，可以使用下面的代码将时间从0到永远以300毫秒的时间块进行分割：

let clicks$ = Rx.Observable.fromEvent(document.getElementById('btn'), 'click');
let scissor$ = Rx.Observable.interval(300);
clicks$.buffer( scissor$ )
      //.filter( (clicks) => clicks.length >=2 )
      .subscribe((value) => {
          if(value.length === 1) {
            console.log('single click')
          }
          else if(value.length === 2) {
            console.log('double click')
          }
          else if(value.length === 3) {
            console.log('triple click')
          }
      });

请使用如下的方式来阅读此段代码，要缓冲的流 clicks$ 每300毫秒会发出它的值，300毫秒是由 scissor$ 流决定的。所以 scissor$ 流是一把剪刀，如果你愿意，它可以将 clicks$ 流切碎，瞧，我们有一个优雅获取双击的方法了。如你所见，上面的代码捕获了所有类型的点击，但通过解除注释 filter() 操作的话，我们就只能获得双击和三连击。

filter() 操作符同样可以用于其它目的，像随着时间推移记录 UI 发生了什么并回放给用户，唯一能限制它所能做的就是你的想象力。