CODEWITHSUNDEEP
javascriptangularonchange
Nika Kurashvili
Nika Kurashvili

Reputation: 6472

Angular, to many API calls on input 'on-change'

I am using angular 8.

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

  //In Template

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



  //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.

Upvotes: 2

Views: 4316

Answers (3)

Omri L
Omri L

Reputation: 769

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 comes 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.

Upvotes: 3

Hayk Aghabekyan
Hayk Aghabekyan

Reputation: 1087

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

Upvotes: 2

Varun verma
Varun verma

Reputation: 189

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.

Upvotes: 1

Related Questions