debounceTime() 并等待事件答案

【问题标题】：debounceTime() and waiting for eventsdebounceTime() 并等待事件
【发布时间】：2016-11-28 12:23:53
【问题描述】：

我想在 RxJS 中完成一些我会用英语表达的东西：

等待从流中引发事件，执行某个功能，然后等待该流中的 5 秒静默，然后执行另一个功能。

我对此进行了多次尝试。我要订阅的流如下所示：

this.documentClick$ = Observable.fromEvent(document.querySelector('body'), 'mousemove')
    .merge(Observable.fromEvent(document.querySelector('body'), 'click'));

目前的两个竞争者可以胜任，但各有缺点：

this.documentClick$
    .subscribe( () => {
        this.toolbarsVisible = 'visible';
    });

this.documentClick$
    .debounceTime(5000)
    .subscribe( () => {
        this.toolbarsVisible = 'hidden';
    });

和

this.documentClick$
    .do( () => {
        this.toolbarsVisible = 'visible';
    })
    .debounceTime(3000)
    .subscribe( () => {
        this.toolbarsVisible = 'hidden';
    });

这样做的“最正确”方法是什么？我认为最好使用主题，但我无法将Observable.fromEvent() 加入主题。

（我想我真正想问的问题是：如何从 Observable 创建一个 Subject？）

【问题讨论】：

标签： javascript rxjs reactive-programming rxjs5

【解决方案1】：

您不能在 Subject 中转换 Observable（只能使用 asObservable() 运算符从 Subject 到 Observable）。

显然，我不知道您想使用 Subject 的用例是什么，但您可以从 Observable.fromEvent() 获取 Observable 并订阅一个 Subject 。然后这个 Subject 将重新发送 Observable 中的所有值，同时仍然是一个您可以调用 next() 或其他名称的 Subject。

一个说明这种情况的简单演示：

let subject = new Subject();
subject.subscribe(val => console.log('subject', val));

Observable.interval(250)
    .subscribe(subject);

Observable.interval(1000)
    .subscribe(val => subject.next('Hello ' + val));

观看现场演示：https://jsbin.com/zejata/edit?js,console

这个输出例如：

subject 0
subject 1
subject 2
subject Hello 0
subject 3
subject 4
subject 5
subject 6
subject Hello 1
subject 7
subject 8

【讨论】：