$interval in Angular 5

1. $interval-Dienst in AngularJS
2. Verwendung von die statische Zeit und die Take-Methode in Angular 5

AngularJS $interval war eine Möglichkeit, eine Funktion in regelmäßigen Zeitintervallen auszuführen. In Angular 5 gibt es eine statische Timer-Methode in der RxJS-Bibliothek, die für dasselbe verwendet werden kann.

Die statische Timer-Methode akzeptiert zwei Argumente. Das erste ist das Intervall in Millisekunden, und das zweite ist eine optionale Funktion, die aufgerufen wird, wenn dieses Intervall abläuft.

Der Take-Operator kann verwendet werden, um alle anstehenden Timer abzubrechen, wenn eine beobachtbare Sequenz abgeschlossen ist. Lassen Sie uns zuerst die Methode $interval im Detail besprechen und dann zu den Timern statische Methode und take operator in Angular übergehen.

$interval-Dienst in AngularJS

Der Dienst $interval in AngularJS macht dasselbe wie die Methode setInterval() in JavaScript. Die $interval-Variable ist ein Wrapper für die setInterval()-Methode, die es einfach macht, sie zu Testzwecken zu ändern, zu löschen oder nachzuahmen.

Die Funktion setInterval führt die angegebene Funktion wiederholt im Abstand von Millisekunden aus, solange sie mindestens einmal aufgerufen wurde.

Der erste Aufruf von setInterval führt die angegebene Funktion sofort aus und dann alle angegebenen Millisekunden, bis clearInterval auf dem Intervallobjekt selbst ausgeführt wird.

Beispiel:

let timer = setInterval(() => alert('start'), 1000);

// after 20 seconds

setTimeout(() => { clearInterval(timer); alert('stop'); }, 10000);

Verwendung von die statische Zeit und die Take-Methode in Angular 5

Static Time ist eine neue Funktion in Angular 5, mit der Entwickler die Zeitzone für die Daten ihrer Anwendung festlegen können. Dies kann zur Laufzeit erfolgen, indem ein Wert für die Zeitzone an den Dienst Static Time übergeben oder als Anwendungskonfigurationsparameter ausgewählt wird.

Diese Funktion wurde hinzugefügt, damit Entwickler Angular 5 mit Daten aus verschiedenen Zeitzonen verwenden können, ohne Datenstrings manuell konvertieren zu müssen. Die Take-Methode ist eine weitere neue Funktion, mit der Entwickler angeben können, wie lange eine bestimmte Operation dauern soll, bevor sie abgebrochen wird, wenn sie länger dauert.

Beispielcode:

import { Component, VERSION } from '@angular/core';
import { Observable, timer } from 'rxjs';
import { map, take } from 'rxjs/operators';
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent {
  counter$: Observable<number>;
  count = 5;
  ngOnInit() {
    this.counter$ = timer(0, 5000)
      .pipe(
        take(5),
        map(() => (this.count))
      );
    this.counter$.subscribe((c) => {
      console.log(c);
    }, () => {}, () => {
      console.log('Done', this.count);
    });
  }
}

Code ausführen