Задать вопрос
kl1mmm
@kl1mmm
Хто я?

Как остановить таймер?

Необходимо остановить таймер, описанный в коде ниже. К сожалению, clearInterval из функции stopTheTimer результата необходимого не показал. Как можно решить данную проблему?

<template>
  <div id="clock">
    <span class="time" ref="watch">00:00</span>
  </div>
</template>

<script>
export default {
  name: "MyTimer",
  data() {
    return {
      timeMin: 0,
      timeSec: 0,
      milliseconds: 0,
      interval: null,
    }
  },
  mounted() {
    const watch = this.$refs.watch;
    clearInterval(this.interval);
    localStorage.removeItem('startTime')
    localStorage.setItem('startTime', (new Date().getTime()).toString())
    this.interval = setInterval(() => {
      this.milliseconds += 10;
      this.timeSec = (((new Date().getTime()) - localStorage.getItem('startTime')) / 1000);
      if (this.timeSec >= 60) {
        this.timeMin = Math.floor(this.timeSec / 60);
        let sec = Math.floor(this.timeSec - (this.timeMin * 60))
        watch.innerHTML = (('0' + this.timeMin).slice(-2)) + ":" + (('0' + sec).slice(-2));
      } else {
        watch.innerHTML = (('0' + this.timeMin).slice(-2)) + ":" + (('0' + Math.floor(this.timeSec)).slice(-2));
      }
      // let dateTimer = new Date(this.milliseconds);
      // watch.innerHTML = ('0' + dateTimer.getUTCMinutes()).slice(-2) + ':' + ('0' + dateTimer.getUTCSeconds()).slice(-2);
    }, 10)
  },
  stopTheTimer() {
    clearInterval(this.interval);
  }
}
</script>
  • Вопрос задан
  • 133 просмотра
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 2
0xD34F
@0xD34F Куратор тега Vue.js
clearInterval из функции stopTheTimer результата необходимого не показал

А что такое stopTheTimer? Должно быть, метод компонента. Давайте посмотрим:

data() {
  <...>
},
mounted() {
  <...>
},
stopTheTimer() {
  clearInterval(this.interval);
}

Не могу назвать себя большим знатоком vue, но я точно слышал, будто методы должны находиться в methods, а не непосредственно в объекте настроек.
Ответ написан
@nikitaGlobal
Можно очищать localStorage, а в функции setInterval проверять наличие записи в localStorage.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы