angular - 如何在 Angular 5 的去抖动时间上达到组件的功能？

Question

我如何以 Angular 设置组件功能的去抖动时间。 实际上我从 selectTableRow() 方法中点击了一个 api。当我选择 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;
}

你可以试试这个。如果您有任何疑问，请告诉我。