Bagaimana untuk Melaksanakan Debouncing dalam Angular 2?

Angular 2 Debouncing

Debouncing ialah teknik yang digunakan dalam pengaturcaraan untuk menangguhkan pelaksanaan tugas sehingga tempoh masa tertentu telah berlalu sejak panggilan terbaharu untuk tugas itu. Dalam Angular, nyahlantun boleh digunakan untuk meningkatkan prestasi aplikasi anda dengan mengurangkan bilangan kali aplikasi anda melakukan operasi yang mahal.

Dalam AngularJS, nyahlantun dikendalikan menggunakan arahan ng-model-options. Walau bagaimanapun, dalam Angular 2 , tiada fungsi nyahlantun terbina dalam. Sebaliknya, anda boleh menggunakan operator RxJS debounceTime() pada valueChanges yang boleh diperhatikan bagi kawalan borang.

Berikut ialah contoh cara untuk menyahlantun kawalan borang dalam 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>

Dalam contoh ini, kami mula-mula mencipta FormControl baharu bernama firstNameControl. Kemudian, kami melanggan valueChanges yang boleh diperhatikan bagi kawalan borang. Kami menggunakan operator debounceTime() untuk menangguhkan pelaksanaan fungsi panggil balik sehingga 1000 milisaat telah berlalu sejak kali terakhir nilai input berubah.

Operator debounceTime() hanyalah salah satu daripada banyak operator RxJS yang boleh digunakan untuk memanipulasi dan menapis yang boleh diperhatikan. Untuk mendapatkan maklumat lanjut tentang pengendali RxJS, sila rujuk dokumentasi RxJS.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Debouncing dalam Angular 2?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!