rxjs里takeWhile operators的用法

takeWhile subscribes and begins mirroring the source Observable. Each value emitted on the source is given to the predicate function which returns a boolean, representing a condition to be satisfied by the source values. The output Observable emits the source values until such time as the predicate returns false, at which point takeWhile stops mirroring the source Observable and completes the output Observable.

测试例子：

const result = clicks.pipe(takeWhile((ev: MouseEvent) => ev.clientX > 400 ));
    result.subscribe(x =>  + console.log('diablo: ' + x.clientX));

测试结果：

(1) 点击屏幕下方区域，打印x: 919
(2) 鼠标移至屏幕左上角，确保点击区域的clientX < 400, 此时output Observable停止监控。
(3) 此时无论再怎么点击，result Observable也无法emit value了。

const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(tap(ev => console.log('diablo: ' + ev), takeWhile((ev: MouseEvent) => ev.clientX > 400 )));
    result.subscribe(x =>  + console.log('diablo: ' + x.clientX));

以上例子，takeWhile无法起到自动停止监控的目的。

将takeWhile和tap的顺序调一下，就又能正常工作了：

const clicks = fromEvent(document, 'click');
    const result = clicks.pipe(takeWhile((ev: MouseEvent) => ev.clientX > 400 ), tap(ev => console.log('diablo: ' + ev), ));
    result.subscribe(x =>  + console.log('diablo: ' + x.clientX));

要获取更多Jerry的原创文章，请关注公众号"汪子熙":