S
S
sanex33392016-08-10 22:25:24
Angular
sanex3339, 2016-08-10 22:25:24

RXJS and Merge 2 value sequences. How to do it right?

https://plnkr.co/edit/zO3gpQoxnnA2KwZBtKJB?p=preview
File DumbInput.ts
There is an input. Keyup and blur input events in the form of Observable sequences I merge into one Observable common sequence.
The idea is this:
- at the keyup event, we return the value with a delay of 1000ms.
- at the blur event, if the input value is empty - we give the default value
If after keyup, but before the value is tapped, i.e. within a 1000ms interval, a blur event will occur - the keyup event must stop and not be called until a new keyup event.
And here is the problem with the last one. If at the moment after keyup, during the debounce interval, a blur event occurs - at that very moment, the keyup value will be tapped and immediately the blur value will be tapped. In the demo example, this will be visible in the console.
How to reproduce:
enter something into the input, then click OUTSIDE the input in less than 1 second - both subscribers will work in the console: first on keyup and immediately then on blur
Code:

let blur$: Observable<string> = this.blur$
            .filter(value => value === '')
            .map(value => this.defaultValue);

        let keyup$: Observable<string> = this.keyup$
                .takeUntil(blur$)
                .distinctUntilChanged()
                .debounceTime(1000)
                .repeat();

        this.outputValue = Observable.merge(
            keyup$,
            blur$
        );

        keyup$.subscribe(e => console.log('keyup', e));
        blur$.subscribe(e => console.log('blur', e));

How to make keyup taps not work after takeUntil? Why doesn't takeUntil cancel the keyup debounce interval?

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question