Quantcast
Channel: Can't make debounceTime() or throttleTime() to work on an Angular http request - Stack Overflow
Viewing all articles
Browse latest Browse all 102

Answer by CharanRoot for Can't make debounceTime() or throttleTime() to work on an Angular http request

$
0
0

But the http.get request is not debounced or throttled at all! If I type 10 characters in 3 seconds, it makes 10 http requests.

your implementing in a wrong way. you need capture input first, apply denounce and do HTTP request.

you can implement in several ways

1) Observable.fromEvent

<input type="text" #input>

Component

 @ViewChild('input') text: ElementRef;  ngAfterViewInit() {    let text$ = Observable.fromEvent(this.text.nativeElement, 'keyup')     .do(() => console.log("keyup"))    .debounceTime(3000)     .distinctUntilChanged()    .switchMap(() => getCategoriesList())        .subscribe(res => console.log(res));  }

2) Using subject

<input type="text" (keyup)="search($event)">

component

  searchTerms = new Subject<string>();search(term: string): void {    this.searchTerms.next(term);  }ngOnInit(): void {    this.searchTerms      .debounceTime(3000)      .distinctUntilChanged()      .switchMap(() => getCategoriesList())      .subscribe(term => {        console.log();     });

3) Using form control

<input type="text" [formControl]="term">

component

  term = new FormControl();  ngOnInit() {    this.items = this.term.valueChanges                 .debounceTime(3000)                 .distinctUntilChanged()                 .switchMap(term => getCategoriesList(term))                 .subscribe(res => console.log(res));  }

Viewing all articles
Browse latest Browse all 102

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>