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