12、RxJS时间操作符与用户输入处理实战

RxJS时间操作符与用户输入处理实战

1. RxJS时间操作符基础

在RxJS中，时间操作符能帮助我们对事件流进行精确的时间控制。下面是一个简单的代码示例，展示了如何使用 timer 、 delay 、 timeInterval 和 map 操作符：

Rx.Observable.timer(1000)
  .delay(2000)
  .timeInterval() 
  .map(int => Math.floor(int.interval / 1000))
  .subscribe(seconds => console.log(`${seconds} seconds`));

这段代码会先等待1秒发射一个值，然后延迟2秒，计算时间间隔并将结果转换为秒后输出。运行这段代码会打印出“3 seconds”，而不是初始的时间。这个过程体现了延迟操作的两个重要特性：
- 操作符只影响事件的传播，而非创建 ：每个操作符就像流水线上的一个工作站，它们独立工作，不影响事件的产生。例如， delay() 操作符只会在事件生成后影响其传播。
- 时间操作符按顺序执行 ：当多个操作符链式调用时，它们会按顺序依次执行。

2. 操作符对事件传播的影响

delay() 操作符是一个很好的例子，