RxJS系列教程(八) 时间相关操作符

我们知道同步程序的运行时间是可预测的，因为同步程序的运行是线性的，某一步的运行时间和输入规模以及环境的运行速度有关。而异步程序则很难预测，有很多其他因素影响到程序的运行，比如网络速度等等。因此对于异步程序来说，我们不能主动的去预估时间来做些什么，而应该被动的等它通知我们可以做了才做。

setTimeout干的活，在RxJS中由timer操作符来完成。

Rx.Observable.timer(1000).subscribe(() => /*一秒后将调用这里的代码*/);

setInterval干的话，由interval操作符来做，例子就不举了。

下面得讲一下delay这个操作符。千言万语抵不过一张图：

delay操作符

interval操作符：每隔一秒发送一个事件，值从0开始；

skip操作符：跳过1个事件(为了方便从1开始计数)；

take操作符：因为interval产生无限事件序列，因此这里只取5个事件；

do操作符：debug用；

delay操作符：延迟2秒。或者理解为阻塞它之前的事件序列2秒钟；

timeInterval操作符：计时操作符；

在控制台我们看到了输出，在delay操作符延迟2秒的时间里产生了1，2，也就是说delay操作符不影响事件的产生，它只影响事件的传播，这一点很重要。由于delay影响事件的传播，因此在第3秒的时候才1这个事件才开始继续传播下去(为啥我们看到的时间间隔是4秒呢？因为我们之前skip了1秒，或者说1这个事件是从第2秒才开始的)。所以在第3秒的时候，发送了3，同时observer收到了1；在第4秒的时候，发送了4，而第2秒延迟2秒是第4秒，第2秒发送的是2，因此第4秒observer收到的2。后面以此类推(之后的时间间隔都为1秒，这个很容易推算了)。

如果有多个delay操作符呢？我们这样考虑就好了，碰到delay操作符，事件序列就被阻塞，不到时间无法通过，就像水坝的截流，上游产生多少水我不管，不到时间我不开闸门让水继续流。

说到时间就不能不说debounce和throttle这两个重要的操作符。

Debouncing

RxJS中提供了debounceTime操作符，接收以毫秒为单位的参数。具体用法如图：

debounceTime操作符

上图传给debounceTime操作符的参数为900毫秒，它的含义是，如果在900毫秒内没有新事件产生，那么之前的事件将通过；如果在900毫秒内有新事件产生，那么之前的事件将被舍弃。因此上图的第一秒产生了第一个事件0，虽然第一个900毫秒内没有新事件产生，但之前也没有事件，所以没有输出；第二秒产生了第二个事件1，那么在第二个900毫秒的时候没有新事件产生，所以第一个事件0通过，控制台打印0。以此类推，控制台每个事件都将打印。如果我们传给debounceTime操作符的参数为1000毫秒，即1秒，那控制台最终打印什么呢？根据刚才的推算，每一秒都有新事件产生，所以之前的事件全部被舍弃，直到最后一个事件，以后也没有新事件产生，所以控制台将打印4。请大家自行测试。

这个操作符的应用场景就是常见的搜索框提示，利用debounceTime操作符对输入框的keyup事件进行截流，在一个合理的时间点发送http请求。

Throttling

throttleTime操作符是debounceTime操作符的好姊妹。它所做的操作是，在一定时间范围内不管产生了多少事件，它只放第一个过去，剩下的都将舍弃。理解它最好的方式就是自己写个代码尝试一下，就当是个练习吧。

Buffer

buffer相关的操作符也都是和时间有关的操作，因此也放在这里来讲。首先是buffer操作符，它接收一个observable作为参数，这个observable作为buffer的中止条件，并把buffer的数据作为数组传播下去。看图说话：

buffer操作符

首先数据源是0秒后每隔一秒发送数据，紧接着buffer操作符中的中止条件是5秒后结束buffer并开始让数据继续往下传播，通过do操作符可以看到buffer的数据当成一个数组传播下来。

接下来看一下bufferCount操作符，这个操作符比较好理解，它会接收一个参数，表示要缓冲的事件个数。这里就不做演示了。应用场景可以给大家一个，比如有个input，当你输入5个字符时，改变input的样式。需要源码的请打赏，谢谢。

bufferWhen操作符和buffer操作符只有轻微的不同，在于它们的输入参数上，buffer接受一个observable参数，而bufferWhen接受一个函数，这个函数的返回值为observable。

小练习：一个输入框，一个按钮，一个展示内容区域。输入任何内容，点击按钮显示之前输入过的内容，即历史记录。提示：使用到的操作符，debounceTime，pluck，bufferWhen或buffer，Ramda.js库(不是必须)。

最后一个bufferTime操作符，顾名思义，就是buffer一定时间内的事件。这个很简单了，自行测试练习吧。