Angular 5 中 $interval

Muhammad Adil 2023年1月30日 2022年4月20日
  1. AngularJS 中的 $interval 服務
  2. 在 Angular 5 中使用靜態時間和 Take 方法
Angular 5 中 $interval

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

執行程式碼

Muhammad Adil avatar Muhammad Adil avatar

Muhammad Adil is a seasoned programmer and writer who has experience in various fields. He has been programming for over 5 years and have always loved the thrill of solving complex problems. He has skilled in PHP, Python, C++, Java, JavaScript, Ruby on Rails, AngularJS, ReactJS, HTML5 and CSS3. He enjoys putting his experience and knowledge into words.

Facebook

相關文章 - Angular Function