Question

所以我有2000多名员工的名单，我需要过滤它们。正如我目前所拥有的那样，它变得非常缓慢并且滞后2秒。每当我输入一个字母时，它每次都会传递该列表。

有什么方法可以缓解滞后？

更新

这是一些示例代码：

<div style="margin-bottom:30px;" *ngIf="emulatedList">

   <input type="text" style="width:200px; background-color:#eeeeee;" name="searchText" [(ngModel)]="searchText" placeholder="Filter Dropdown List">

   <select style="background-color:#eeeeee;" [(ngModel)]="selected" placeholder="Emulate Person">
      <option *ngFor="let delegate of emulatedList | filter: searchText; trackBy: trackByName" [ngValue]="delegate.employeeid">
         {{delegate.employeename}}
      </option>
   </select>

   <span>
      <a (click)="addDelegate(selected)" style="background-color:#5B9C64; font-size:16px; color:#ffffff; padding:10px; margin-right:30px; border-radius: 10px;">Add Delegate</a>
   </span>

</div>

component.ts文件：

ngOnInit() {   
this.personsService.getEmulateList().subscribe(data => {
  setTimeout( () => {
    //console.log(data);
    this.emulatedList = data;
  }, 300);
});

Answer 1

您可以使用超时，以便在没有x秒请求之前不运行代码

在下面的示例中，尽管在循环中调用doFiltering 10次，但控制台日志语句仅打印一次，在循环完成后恰好1秒

let handle; 

for(var i = 0; i < 10; i++) {
    doFiltering();
}

function doFiltering() {
    // Check if there is a reference to running timeout
    if (handle != null) {
        // Cancel it
        clearTimeout(handle);
    }
    // Start a timeout
    handle = setTimeout(() => {
        // Do you filtering in here
        console.log("Filtering now");
        handle = null;
    }, 1000);
}

Answer 2

如果您正在聆听不断变化的值，则可以使用debounceTime。不确定您使用的是[(ngModel)]还是被动形式。它应该是这样的：

this.formCtrlSub = this.firstNameControl.valueChanges
  .debounceTime(1000)
  .subscribe(newValue => this.fetchNewResults());

Answer 3

而不是使用管道numpy作为：

<强> HTML

rxjs/add/operator/debounceTime

<强> component.ts

<input [ngModel]='filterValue' (ngModelChange)='changed($event)' />

Answer 4

您可以使用计时器等待用户停止输入，然后过滤结果，而不是使用管道。

timer: any;

getList(searchText) {
 if (searchText.length >= 3) {
  clearTimeout(this.timer);
  this.timer = setTimeout(() => {
  // filter here
  }, 1100);
} 
else {
  this.list= [];
 }
}

管道通过大列表

4 个答案: