Applying swichMap to combine observables from both debounced and non-debounced streams

Question

Applying swichMap to combine observables from both debounced and non-debounced streams

So, currently I am working with 2 observables.

The obseravableClickBtn observable will send a request immediately upon click.
The observableInputText observable will debounce the requests by 3 seconds.

Here is the code snippet:

obseravableClickBtn = Observable.fromEvent(document.getElementsById('btnSearch'), 'click')

observableInputText = Observable.fromEvent(this.textBoxInput1.nativeElement, 'keyup')
.merge(Observable.fromEvent(this.textBoxInput2.nativeElement, 'keyup')).debounceTime(3000)

My challenge is that during the 3-second debounce period of the observableInputText, if the btnSearch is clicked, I want to cancel the observableInputText observable and immediately send a request instead.

I attempted to solve this using:

const mergeObservable=obseravableClickBtn.merge(observableInputText).switchMap(
()=>sendRequest());

However, I am facing an issue where two requests are being made if I click btnSearch during the 3-second debounce after inputting. I require only one observable to run at a time. Is there any other operator function available for achieving this?

angular typescript merge rxjs observable

Answer 1

Answer №1

Another option to consider is using the takeUntil operator.

searchClick$: Subject = new Subject();
obseravableClickBtn.subscribe(() => {
   // Button has been clicked
   searchClick$.next(true);
});



 observableInputText = Observable.fromEvent(this.textBoxInput1.nativeElement, 'keyup')
    .merge(Observable.fromEvent(this.textBoxInput2.nativeElement, 'keyup')).pipe(debounceTime(3000), takeUntil(searchClick$));

Answer 2

Another option to consider is using the takeUntil operator.

searchClick$: Subject = new Subject();
obseravableClickBtn.subscribe(() => {
   // Button has been clicked
   searchClick$.next(true);
});



 observableInputText = Observable.fromEvent(this.textBoxInput1.nativeElement, 'keyup')
    .merge(Observable.fromEvent(this.textBoxInput2.nativeElement, 'keyup')).pipe(debounceTime(3000), takeUntil(searchClick$));

Applying swichMap to combine observables from both debounced and non-debounced streams

Answer №1

Similar questions

When Typescript compiles to JavaScript, it may result in code that appears to be a function

Trouble with loading images on Angular Application

Call a function within another function of the same class in Angular2, and utilize the properties of the first function in the

Activate the selection feature upon clicking the checkbox

Show the login form and accompanying controls in the center of the screen with Angular 6

What steps can I take to prevent my authenticated user from being redirected back to the login page in Angular 16?

Validating Firebase data for null values

Encountering a 500 Internal Server Error while using passport-jwt in a MEAN-Stack application

I have tried to install Angular Animations but have encountered difficulty importing it into my project

Please indicate the generator title (for example, nx generate @nrwl/workspace:library) specifically for Angular

Is it possible to use a type predicate to return `void` from a function?

Executing a function in the view/template with Angular 2+

Leveraging Axios within VueJS - the missing piece

Is there a way to signal an error within an Observable function that can handle multiple scenarios depending on the specific page being viewed in an Angular application?

Is there a way to automatically validate all input fields as soon as a user arrives on the page and immediately clicks the button?

retrieving dynamic information from beyond the subscribe function

Error Handling in Angular2 MVC 4 Project Route Issues

Challenges faced with Angular 4 TypeScript destructuring implementation

Error encountered with the PrimeNG Angular2 Accordion component

TypeScript Yup schema validation combined with the power of Type Inference