Angular 如何在角5中找到分量对去盎司时间的函数？

我是如何在角度方向上设置分量函数的去盎司时间的。 实际上，我从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>

---

要解决您的问题，请使用lodash库的去盎司方法

npm i --save lodash

在.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();
  }
}

---

以下是不使用任何库的简单答案

//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;
}

---

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

@lgor getting debounce（）是未定义的。@Gurpreitsingh，安装lodash“npm i lodash”，在.ts文件“import{debounce}顶部从lodash导入debounce来自“lodash”；谢谢。它对我有效，无需安装任何软件包。在尝试以各种方式实现debounce逻辑但失败后，这个简单的逻辑帮了我的忙。

//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;
}