Comment faire un timer dans Angulaire 5

Je suis en utilisant Angulaire 5.

Je veux savoir comment puis-je commencer à chronométrer quand un bouton "jouer" est enfoncée, afin de savoir comment beaucoup de temps est passé depuis que j'ai cliqué.

Je voudrais aussi savoir si il est possible de l'arrêt de la minuterie, et ensuite être capable de continuer avec le même temps d'avant.

J'ai finalement résolu ma question avec Pardeep Jain réponse. Même si ce n'était pas exactement ce que je cherchais.
Je ne voulais pas d'un compte à rebours, j'ai voulu compter la durée. Voici le code que j'ai utilisé à la fin:

time: number = 0;
interval;

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

pauseTimer() {
  this.play = false;
  clearInterval(this.interval);
}
  • Pouvez-vous nous montrer vos tentatives jusqu'à présent? Ou vous avez une question plus précise sur l'endroit où vous êtes coincé?
InformationsquelleAutor Samuel | 2018-05-21
  1. 46

    Vous pouvez simplement utiliser setInterval pour créer de tels minuterie Angulaire, Utilisez ce Code pour minuterie -

    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>

    Exemple De Travail

    Une autre manière, en utilisant des Observables de la minuterie comme ci-dessous -

    import { timer } from 'rxjs';

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

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

    Exemple De Travail

    Pour plus d'informations lire ici

    • Utilisation de la minuterie de l'observable au lieu
    • merci pour la suggestion, de réponses mis à jour!
    • Comment puis-je appeler une fonction lorsque vous avez terminé la minuterie?
    • Vous pouvez vérifier si timeLeft est = 0, appelez votre fonction
    • Si vous êtes à la recherche d'une solution plus complète avec diverses options de mise en forme et des fonctions telles que démarrer/arrêter/mettre en pause/reprendre, cochez cette réponse - stackoverflow.com/a/56230401/1209475
    InformationsquelleAutor Pardeep Jain
  2. 0

    Ce peut-être exagéré pour ce que vous cherchez, mais il y a un mécanisme national de prévention paquet appelé marky que vous pouvez utiliser pour ce faire. Il vous donne un couple de fonctionnalités supplémentaires au-delà de tout juste le démarrage et l'arrêt d'une minuterie.
    Vous avez juste besoin de les installer via npm et ensuite importer la dépendance n'importe où vous souhaitez l'utiliser.
    Voici un lien vers le npm paquet:
    https://www.npmjs.com/package/marky

    Un exemple d'utilisation après l'installation via npm serait comme suit:

    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 est simplement une chaîne de caractères qui allez-vous faire pour identifier ce type particulier de mesure de temps. Vous pouvez avoir plusieurs mesures que vous pouvez revenir en arrière et de référence de votre minuterie statistiques à l'aide des touches que vous créez.

    • Pourquoi utiliser un paquet supplémentaire pour utiliser un simple timer?
    • Lui donne la polyvalence de l'utiliser n'importe où, sans besoin de créer un tout nouveau service ou séparé helper util. Vous permet également de stocker plusieurs types de minuterie stats de revoir s'il avait besoin de reprendre la minuterie. Ne pas essayer de dire votre réponse est fausse, tout en essayant de fournir une autre option pour lui.
    InformationsquelleAutor bitW0lf