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