如何使用 RxJS 显示“用户正在输入”指示器？

我了解一点 BaconJS，但现在我尝试通过创建“用户正在输入...”指示器来学习 RxJS。这很简单，可以用两个简单的规则来解释：

1. 当用户打字时，指示器应该立即可见。
2. 当用户停止键入时，指示器应该仍然可见，直到用户最后一次键入操作后 1 秒。

我不确定这是否正确，但到目前为止我已经创建了两个流：

1. 发出一个心跳流0每一秒。
2. 一个流来捕获用户键入事件并发出1对于每一个事件。

然后我将它们合并在一起，然后简单地利用结果。如果它是一个1，然后我显示指标。如果它是一个0，然后我隐藏该指示器。

看起来是这样的：

const showTyping = () =>
  $('.typing').text('User is typing...');

const showIdle = () =>
  $('.typing').text('');

// 1 second heartbeats are mapped to 0
const heartbeat$ = Rx.Observable
  .interval(1000)
  .mapTo(0);

// user typing events are mapped to 1
const input$ = Rx.Observable
  .fromEvent($('#input'), 'input')
  .mapTo(1);

// we merge the streams together
const state$ = heartbeat$
  .merge(input$)
  .do(val => val === 0 ? showIdle() : showTyping())
  .subscribe(console.log);

这是 JSBin 的链接：

http://jsbin.com/vekixuv/edit?js,控制台,输出 http://jsbin.com/vekixuv/edit?js,console,output

我对这个实现有几个问题和疑问：

1. 有时，当用户打字时，0潜入，因此指示器会闪烁一瞬间，然后在用户下一次击键时返回。
2. 不保证指示器会在用户停止输入后 1 秒消失。它只能保证指示器会在 1 秒内消失（这与我们想要的相反）。
3. 使用心跳流是正确的 RxJS 方法吗？我有一种感觉，可能不是。

我有一种感觉，我的实施完全偏离了基础，我感谢您能够提供的任何帮助。谢谢。

你甚至不需要使用两个 Observables，只需要使用一个debounceTime() http://reactivex.io/rxjs/class/es6/Observable.js~Observable.html#instance-method-debounceTime。您尝试制定的所有逻辑都已经存在于debounceTime()操作员：

const showTyping = () =>
  $('.typing').text('User is typing...');

const showIdle = () =>
  $('.typing').text('');

const input$ = Rx.Observable
  .fromEvent($('#input'), 'input')
  .do(() => showTyping())
  .debounceTime(1000)
  .subscribe(() => showIdle());

观看现场演示：http://jsbin.com/cixipa/6/edit?js,控制台,输出 http://jsbin.com/cixipa/6/edit?js,console,output