J'ai développé un bouton avec deux états (Start et Stop).

Lorsque je démarre sur l'une des lignes, un décompte du temps est lancé. Lors de l'exécution du bouton sur une autre ligne (commencer à commencer à compter sur une autre ligne), je souhaite mettre en pause la ligne qui était précédemment active et démarrer le chronomètre sur cette nouvelle ligne.

Mon problème est que je ne suis pas en mesure de mettre en œuvre cela.

Lorsque j'essaie d'arrêter la ligne précédente et de démarrer uniquement sur la nouvelle ligne, les minuteurs s'arrêtent simplement :(

Est-ce que quelqu'un peut m'aider?

Stackblitz

ts

startTimer(data) {
  let self = this;
    self.taskService.startTimer(data);
    self.currentState = self.taskService.getCurrentState();

      const pauseIds = [];
    this.data.forEach(d => {
      if (d.id !== data.key.id && d.idUser !== data.key.idUser
        && this.taskService.fetchDisplay() !== undefined
        && this.taskService.currentState === 'start')
        pauseIds.push(d.id);
    });
    pauseIds.forEach(id => {
      console.log (id)
      this.taskService.pauseTimer(id);
    });

  }

  pauseTimer(data) {
   let self = this;
    self.taskService.pauseTimer(data);
    self.currentState = self.taskService.getCurrentState();

  }

service

startTimer(data) {
    this.time = 0;
    this.currentRowIndex = data.rowIndex;
    this.currentState = 'start';
    this.interval = setInterval(() => {
      if (this.time === 0) {
        this.time++;
      } else {
        this.time++;
      }
      this.display = this.time;
      return this.display;
    }, 1000);   
  }

  pauseTimer(data) {
    this.currentRowIndex = data.rowIndex;
    this.currentState = 'pause';
    this.time = 0;
    clearInterval(this.interval);


  }

  fetchDisplay() {
    return this.display;
  }

  getCurrentState() {
    return this.currentState;
  }
1
Mike Landers 30 janv. 2020 à 17:24

1 réponse

Meilleure réponse

Comme Ivan Mihaylov l'a mentionné dans les commentaires, la logique semble vraiment trop alambiquée.

Néanmoins la solution est assez simple.

  • Vous devez démarrer votre minuteur après avoir mis en pause tous les autres minuteurs démarrés possibles. Sinon, l'état de votre minuterie est pause après la fin de startTimer, de sorte que les conditions du modèle empêchent l'affichage de l'état actif.

  • Vous devez réinitialiser display ainsi que time dans la méthode taskService.startTimer. Sinon, l'heure affichée au début contient la dernière valeur du compteur précédent.

Voici un exemple de StackBlitz corrigé.

1
Ivan Kashtanov 30 janv. 2020 à 14:58