Angular 5에서 타이머를 실행하는 방법

Angular 5에서 타이머를 실행하는 방법

닫힘.이 질문은 더 필요합니다.집중적인현재 답변을 수락하고 있지 않습니다.

---

이 질문을 개선하고 싶으십니까?이 게시물을 편집하여 하나의 문제에만 초점을 맞추도록 질문을 업데이트합니다.

5년 전에 문을 닫았습니다.

이 질문을 개선합니다.

Angular 5를 사용하고 있습니다.

클릭 후 시간이 얼마나 지났는지 알기 위해 '재생' 버튼을 눌렀을 때 타이밍을 어떻게 시작하는지 알고 싶습니다.

타이머를 정지한 후 이전과 같은 시간으로 계속 진행할 수 있는지도 알고 싶습니다.

드디어 파르디프 자인의 대답으로 질문을 풀었습니다.제가 찾던 것은 아니었지만요.카운트다운을 원한 게 아니라 기간을 세고 싶었어요.마지막에 사용한 코드는 다음과 같습니다.

time: number = 0;
interval;

startTimer() {
  this.play = true;
  this.interval = setInterval(() => {
    this.time++;
  },1000)
}

pauseTimer() {
  this.play = false;
  clearInterval(this.interval);
}

간단히 사용할 수 있습니다.setIntervalAngular에서 이러한 타이머를 만들려면 타이머에 이 코드를 사용합니다.

timeLeft: number = 60;
  interval;

startTimer() {
    this.interval = setInterval(() => {
      if(this.timeLeft > 0) {
        this.timeLeft--;
      } else {
        this.timeLeft = 60;
      }
    },1000)
  }

  pauseTimer() {
    clearInterval(this.interval);
  }
    
<button (click)='startTimer()'>Start Timer</button>
<button (click)='pauseTimer()'>Pause</button>

<p>{{timeLeft}} Seconds Left....</p>

#작업 예제

#아래와 같은 관찰 가능한 타이머를 사용하는 다른 방법 -

import { timer } from 'rxjs';

observableTimer() {
    const source = timer(1000, 2000);
    const abc = source.subscribe(val => {
      console.log(val, '-');
      this.subscribeTimer = this.timeLeft - val;
    });
  }

<p (click)="observableTimer()">Start Observable timer</p> {{subscribeTimer}}

작업 예제

자세한 내용은 여기를 참조하십시오.

이것은 당신이 찾고 있는 것에 대해 과잉 살상일 수 있지만, NPM 패키지라는 것이 있습니다.marky이 작업에 사용할 수 있습니다.타이머를 시작하거나 중지하는 것 외에도 몇 가지 추가 기능을 제공합니다.다음을 통해 설치하면 됩니다.npm그런 다음 종속성을 사용할 위치로 가져옵니다.다음 링크는 다음과 같습니다.npm패키지: https://www.npmjs.com/package/marky

npm을 통해 설치한 후의 사용 예는 다음과 같습니다.

import * as _M from 'marky';

@Component({
 selector: 'app-test',
 templateUrl: './test.component.html',
 styleUrls: ['./test.component.scss']
})

export class TestComponent implements OnInit {
 Marky = _M;
}

constructor() {}

ngOnInit() {}

startTimer(key: string) {
 this.Marky.mark(key);
}

stopTimer(key: string) {
 this.Marky.stop(key);
}

key는 단순히 시간의 특정 측정값을 식별하기 위해 설정하는 문자열입니다.다시 돌아가서 생성한 키를 사용하여 타이머 통계를 참조할 수 있는 여러 측정값을 가질 수 있습니다.

언급URL : https://stackoverflow.com/questions/50455347/how-to-do-a-timer-in-angular-5