如何在 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中文网其他相关文章！