Как поразить функцию компонента по времени отката в угловых 5?

Question

Как установить время отката для функции компонента в угловых. На самом деле я ударил API из метода selectTableRow (). когда я выбираю tr, затем нажимаю api. Но когда я выбираю несколько tr, на сервер отправляется несколько запросов.

Я хочу, чтобы при быстром выборе нескольких строк таблицы отправлялся только один запрос, такой как (автозаполнение поиска).

HTML

<tr *ngFor="let data of tableData"
    (click)="selectTableRows($event, data)"
    [ngClass]="{'row-highlight': isRowSelected(data.id)}">
    <td>
        <span>{{data.name}}</span>
    </td>
</tr>

Метод

selectTableRows(event, rowData) {
    //Hit api from here
}

Answer 1

вот простой ответ без использования какой-либо библиотеки.

//define variable with null value
currentTimeout: any = null;

selectTableRows(event, rowData) {

    //put your logic here

    this.cancelTimeout();
    this.currentTimeout = setTimeout(() => {

        // call api from here
    }, 1000);

}

cancelTimeout(): void {
    clearTimeout(this.currentTimeout);
    this.currentTimeout = undefined;
}

Вы можете попробовать это. И если у вас есть какие-либо вопросы, дайте мне знать.

Answer 2

Для решения вашей проблемы используйте debounce метод библиотеки lodash.

npm i --save lodash

import debounce вверху вашего файла .ts

import {debounce} from 'lodash';

обновите свою функцию следующим образом:

  private debouncedFunction = null;
  selectTableRows(event, rowData) {
    if (this.debouncedFunction) {
      this.debouncedFunction.cancel();
    }

    this.debouncedFunction =  debounce(() => {
      console.log('selectTableRows', rowData);
      // make your API call here.
    }, 2000);
    this.debouncedFunction();
  }
}