javascript - Angular, to many API calls on input 'on-change' - Stack Overflow

admin管理员组

文章数量:1390399

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

Share Improve this question Follow edited Jul 24, 2019 at 12:18 gulshan arora 47322 silver badges88 bronze badges asked Jul 24, 2019 at 12:00 Nika KurashviliNika Kurashvili 6,4841010 gold badges7373 silver badges152152 bronze badges 4

• 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

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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.

本文标签： javascriptAngularto many API calls on input 39onchange39Stack Overflow