Как прервать предыдущие эмиссии с тем же событием в Angular 8 - PullRequest
Новая
       10

Как прервать предыдущие эмиссии с тем же событием в Angular 8

0 голосов
/ 11 декабря 2019

У меня есть приложение, которое обновляет таблицу таблицы данных каждый раз, когда пользователь выбирает строку в таблице. Для простоты здесь у меня есть пример кода:

child-component.ts 

public jsonData = {...} //api request

this.rowSelectedEvent.subscribe(() => {
  this.refreshData(this.jsonData) 
})

function refreshData(jsonData){
  this.httpService.post(`${environment.BASE_URL}/api`, jsonData.payload).subscribe(
    result => {
      this.resultData = result.data
    }, 
    err => {
      console.error(err)
    }
  )
}

rowSelectedEvent запускается в HTML, когда пользователь нажимаетна ряду стола. Это может быть примером:

app.component.html 

<table>
  <row (click)="notifyRowSelected"></row>
</table>

app.component.ts 

@Output() rowSelectedEvent: EventEmitter<string> = new EventEmitter();

[...]

function notifyRowSelected(){
  this.rowSelectedEvent.emit()
}

Этот код работает нормально, получает ответ API с новыми данными, он длится около 4-5 секунд, пока серверная часть выполняет свои вычисления, и возвращает новые значения. Проблема возникает, когда пользователь нажимает несколько строк несколько раз или за небольшое время, потому что приложение сходит с ума и обновляет данные несколько раз, а не один раз (последний раз). Я попытался использовать unsubscribe(), но потом я не могу снова подписаться, поэтому функциональность теряется. Я также попробовал switchMap(), но по какой-то причине, когда я отлаживаю код, он не попадает в него.

Идея состоит в том, чтобы остановить ожидающие процессы, когда пользователь нажимает на новую строку, оставляя только последний щелчок, который выполняет вычисления и получает ответ. Любой совет?

...