重新订阅takeUntil / skipUntil

时间:2017-07-23 10:24:31

标签: javascript rxjs reactive-programming

以下代码定义了我想要的行为(它的工作原理)。只有在鼠标按下时才会发生mousemove事件的发生。

Rx.Observable.fromEvent(window,"mouseup")
.subscribe( 
  () => {
      if(subscription)
         subscription.dispose();
  }
) 

Rx.Observable.fromEvent(window,"mousedown")
.subscribe(
  () => {
      subscription = Rx.Observable.fromEvent(window,"mousemove")
                     .subscribe(
                       (event) => console.log(event)
                     )
  }
) 

我想用takeUntil / skipUntil运算符重写它。但这失败了:

let fs =  [
  (e) => console.log(e),
  (err) => console.log(err),
  () => {
      console.log('done')  
      source.subscribe(...fs);
  }
 ];

let getDown = () => Rx.Observable.fromEvent(document,"mousedown");
let getUp = () => Rx.Observable.fromEvent(document,"mouseup");

let source = Rx.Observable.fromEvent(document,"mousemove")
.skipUntil(getDown())
.takeUntil(getUp());

source.subscribe(
   ...fs
)

我怎么能这样做?谢谢!

1 个答案:

答案 0 :(得分:3)

通常通过将触发流的每个元素投影到所需的源流中然后将事物展平(通常使用switchMap来实现)来解决此问题。在这种情况下,您希望将向下投射到移动直到上升。像这样:

const source = getDown().switchMap(() => Rx.Observable.fromEvent(document, "mousemove").takeUntil(getUp());