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 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