如何在 Angular 2 中實現去抖？

Angular 2 Debouncing

Debouncing 是編程中使用的一種技術，用於延遲任務的執行，直到指定的時間段過去後對該任務的最近調用。在 Angular 中，去抖動可透過減少應用程式執行昂貴操作的次數來提高應用程式的效能。

在 AngularJS 中，去抖動是使用 ng-model-options 指令處理的。然而，在 Angular 2 中，沒有內建的去抖動功能。相反，您可以在表單控制項的 valueChanges 可觀察值上使用 RxJS debounceTime() 運算子。

以下是如何在 Angular 2 中對表單控制項進行去抖動的範例：

<code class="typescript">import {Component}   from '@angular/core';
import {FormControl} from '@angular/forms';
import {Observable}  from 'rxjs/Observable';
import 'rxjs/add/operator/debounceTime';

@Component({
  selector: 'my-app',
  template: `<input type=text [value]="firstName" [formControl]="firstNameControl">
    <br>{{firstName}}`
})
export class AppComponent {
  firstName        = 'Name';
  firstNameControl = new FormControl();

  ngOnInit() {
    this.firstNameControl.valueChanges
      .debounceTime(1000)
      .subscribe(newValue => this.firstName = newValue);
  }
}</code>

In在這個範例中，我們先建立一個新的FormControl，名為firstNameControl。然後，我們訂閱表單控制項的 valueChanges observable。我們使用 debounceTime() 運算子來延遲回呼函數的執行，直到自上次輸入值變更以來經過 1000 毫秒。

debounceTime() 運算子只是許多 RxJS 運算子之一用於操縱和過濾可觀測值。有關 RxJS 運算子的更多信息，請參閱 RxJS 文件。

以上是如何在 Angular 2 中實現去抖？的詳細內容。更多資訊請關注PHP中文網其他相關文章！