CODEWITHSUNDEEP
javascriptrxjs
wlad
wlad

Reputation: 60

RxJS skipUntil operator not behaving as expected

I have two simple event handling Observables that I set up on mousedown.

Mouseup triggers several actions in the application, depending on whether or not the element is moved on mousemove, so i need to prevent it on simple click.

My impression was, that this code should start firing mouseup only after 500 mousemoves have been skipped and one emitted, however, 'mouseup' is logged even without single 'mousemove' being logged, and immediately (even with skip() set to even more ridiculous numbers).

What am I missing?

var mouseupObservable = Observable.fromEvent(this.element, 'mouseup');
var mouseMoveObservable = Observable.fromEvent(window, 'mousemove');
mouseupObservable
    .skipUntil(mouseMoveObservable)
    .subscribe(()=>console.error('mouseup'));
mouseMoveObservable
    .takeUntil(mouseupObservable)
    .skip(500)
    .subscribe(()=>console.error('mousemove'));

Upvotes: 1

Views: 2630

Answers (1)

Olaf Horstmann
Olaf Horstmann

Reputation: 16892

The thing is that you use the "raw" streams inside the skip, try this:

var mouseupObservable = Observable.fromEvent(this.element, 'mouseup');
var mouseMoveObservable = Observable.fromEvent(window, 'mousemove');

let mouseUp$ = mouseupObservable
    .skipUntil(mouseMoveObservable.skip(500));

mouseUp$.subscribe(()=>console.error('mouseup'));

let mouseMove$ = mouseMoveObservable
    .takeUntil(mouseUp$);

mouseMove$.subscribe....

But please keep in mind that the "takeUntil(...)" will complete your stream whe fulfilled....this means that this will work only for a single "move-click-cycle" - not sure if that is your intention.

Upvotes: 1

Related Questions