I am using angular 8.

There is one auto-plete input and if it's value changes I have to make API call and load new suggestions for this input.

  //In Template

  <autoplate [suggestions]="suggestions" (filterChange)="filterChange($event)"></autoplate>



  //In Component

  filterChange(e) {
    console.log(e)
    this.loadSubscriptions(e ? { 'filterItem.name': e  } : {})
  }

  loadSubscriptions(params) {
     if (this.suggestionsSubscriber) this.suggestionsSubscriber.unsubscribe()
     this.suggestionsSubscriber = this.suggestionsService.loadData(params).subscribe(
        data => this.suggestions = data
     })
  }

Everything works fine, but the problem is when user types fast application makes to many requests.

Can I somehow delay requests if user types fast? for example, while the user is typing don't make API calls on every change, and if the user stops typing then make API call.

Or if you have a better way to solve this problem, please share.

I am using angular 8.

There is one auto-plete input and if it's value changes I have to make API call and load new suggestions for this input.

  //In Template

  <autoplate [suggestions]="suggestions" (filterChange)="filterChange($event)"></autoplate>



  //In Component

  filterChange(e) {
    console.log(e)
    this.loadSubscriptions(e ? { 'filterItem.name': e  } : {})
  }

  loadSubscriptions(params) {
     if (this.suggestionsSubscriber) this.suggestionsSubscriber.unsubscribe()
     this.suggestionsSubscriber = this.suggestionsService.loadData(params).subscribe(
        data => this.suggestions = data
     })
  }

Everything works fine, but the problem is when user types fast application makes to many requests.

Can I somehow delay requests if user types fast? for example, while the user is typing don't make API calls on every change, and if the user stops typing then make API call.

Or if you have a better way to solve this problem, please share.

• javascript
• angular
• onchange

• 4 learnrxjs.io/operators/filtering/throttletime.html – Roberto Zvjerković Commented Jul 24, 2019 at 12:02
• 4 learnrxjs.io/operators/filtering/debouncetime.html – Roberto Zvjerković Commented Jul 24, 2019 at 12:02
• 1 You can implement like when user stop typing It will call API, Refer this blog.sodhanalibrary./2016/10/… – hrdkisback Commented Jul 24, 2019 at 12:04
• 1 angular.io/guide/practical-observable-usage – msmani Commented Jul 24, 2019 at 12:08

3 Answers 3

Use RXJS denounceTime operator. Simply chain it to your Observable.

Whenever debounceTime receives an event, it waits a designated amount of time to see if another event es down the pipe. If it does, it restarts its timer. When enough time has passed without another event streaming in, it emits the latest event.

I would suggest you to use throttle or debounce. You can write your own implementation for those or use library such as lodash.

Debounce using latest Rxjs can be a work around. Please see below for implementation.

Angular and debounce

I also had a same problem, so i put my code inside setTimeout as below

  filterChange(e) {
    console.log(e)
    setTimeout(()=>{
      this.loadSubscriptions(e ? { 'filterItem.name': e  } : {})
    },2000);
  }

Now if you type very fast then it will not call the loadSubscriptions at that time. it will call after 2 sec. You can configure the time according to your choice. I hope This will helps you.