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

Question

[Илья Климов]

Необходимо остановить таймер, описанный в коде ниже. К сожалению, 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>

Comments

[Алексей Ярков]

Не вижу чтобы stopTheTimer() вызывался где-то

[Илья Климов]

Алексей Ярков, извиняюсь, забыл об этом упомянуть - он вызывается непосредственно из родительского элемента.

Answer 1

[0xD34F]

clearInterval из функции stopTheTimer результата необходимого не показал

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

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

Не могу назвать себя большим знатоком vue, но я точно слышал, будто методы должны находиться в methods, а не непосредственно в объекте настроек.

Comments

[Илья Климов]

Факт, спасибо, что подметили. Данную ошибку поправил, но тем не менее, результата не получил.

[0xD34F]

Илья Климов, воспроизводите свою проблему в песочнице, ссылку сюда.

[Илья Климов]

0xD34F, сейчас стал разбираться с проблемой подробнее, пока в песочницу заливал. Оказалось, что вызов функции из родителя, при помощи $ref не откликается… По итогу решил эту проблему).

Answer 2

[nikitaGlobal]

Можно очищать localStorage, а в функции setInterval проверять наличие записи в localStorage.