Angular 5의 $interval

1. AngularJS의 $interval 서비스
2. Angular 5에서 정적 시간 및 Take 메서드 사용

AngularJS $interval은 일정한 시간 간격으로 함수를 실행하는 방법이었습니다. Angular 5에는 RxJS 라이브러리에 동일한 작업을 수행하는 데 사용할 수 있는 타이머 정적 메서드가 있습니다.

정적 타이머 메서드는 두 개의 인수를 사용합니다. 첫 번째는 밀리초 단위의 간격이고 두 번째는 이 간격이 경과할 때 호출되는 선택적 함수입니다.

테이크 연산자는 관찰 가능한 시퀀스가 ​​완료될 때 보류 중인 타이머를 취소하는 데 사용할 수 있습니다. 먼저 $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의 새로운 기능입니다. 이는 시간대 값을 정적 시간 서비스에 전달하거나 이를 애플리케이션 구성 매개변수로 선택하여 런타임에 수행할 수 있습니다.

이 기능은 개발자가 데이터 문자열을 수동으로 변환하지 않고도 다른 시간대의 데이터로 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);
    });
  }
}

코드 실행