Angular 5 中 $interval

1. AngularJS 中的 $interval 服務
2. 在 Angular 5 中使用靜態時間和 Take 方法

AngularJS $interval 是一種以固定時間間隔執行函式的方法。在 Angular 5 中，RxJS 庫中有一個計時器靜態方法，可以用來做同樣的事情。

靜態計時器方法有兩個引數。第一個是以毫秒為單位的間隔，第二個是在此間隔過去時呼叫的可選函式。

當可觀察序列完成時，take 運算子可用於取消任何掛起的計時器。讓我們首先詳細討論 $interval 方法，然後我們將轉到 Angular 中的計時器靜態方法和 take operator。

AngularJS 中的 $interval 服務

AngularJS 中的 $interval 服務與 JavaScript 中的 setInterval() 方法做同樣的事情。 $interval 變數是 setInterval() 方法的包裝器，可以很容易地更改、刪除或模擬以進行測試。

setInterval 函式以毫秒為間隔重複執行給定函式，只要它至少被呼叫一次。

第一次呼叫 setInterval 將立即執行給定的函式，然後每隔指定的毫秒數執行間隔物件本身的 clearInterval。

例子：

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

// after 20 seconds

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

在 Angular 5 中使用靜態時間和 Take 方法

靜態時間是 Angular 5 中的一項新功能，它允許開發人員為其應用程式的資料設定時區。這可以在執行時通過將時區的值傳遞給 Static Time 服務或選擇它作為應用程式配置引數來完成。

新增此功能以允許開發人員使用 Angular 5 處理來自不同時區的資料，而無需手動轉換資料字串。Take 方法是另一個新功能，它允許開發人員指定特定操作在中止之前需要多長時間，如果它需要更長的時間。

示例程式碼：

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);
    });
  }
}

執行程式碼