Reset setInterval() from object

Question

I am playing with VueJS and created a simple counter. I'd like to reset the setInterval() method from the resetTimer() function. However, it's not working. Not sure what I'm missing here.

new Vue({
    el: '#app',
    data: {
        hours: 0,
        minutes: 0,
        seconds: 0,
        counter: 0
    },
    methods: {
        timer() {
                setInterval(() => {
                    this.seconds = this.timerFormat(++this.counter % 60)
                    this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
                    this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
                }, 1000);
            },
            resetTimer() {
                clearInterval(this.timer())
            },
            timerFormat(timer) {
                return timer > 9 ? timer : '0' + timer;
            }
    }
})

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Lean Vue</title>
  </head>
  <body>
    <div id="app">
      <p>{{ hours }} : {{ minutes }} : {{ seconds }}</p>
      <button @click="timer">Start</button>
      <button @click="resetTimer">Pause</button>
    </div>

    <script src="dist/bundle.js"></script>
  </body>
</html>

Answer 1

Define a global variable for the interval timer (my_timer in my example) then you could clear it in the reset action :

new Vue({
    el: '#app',
    data: {
        hours: 0,
        minutes: 0,
        seconds: 0,
        counter: 0,
        my_timer :0
    },
    methods: {
        timer() {
                this.my_timer = setInterval(() => {
                    this.seconds = this.timerFormat(++this.counter % 60)
                    this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
                    this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
                }, 1000);
            },
            pauseTimer() {
                clearInterval(this.my_timer)
            },
            timerFormat(timer) {
                return timer > 9 ? timer : '0' + timer;
            }
    }
})

Hope this helps.

new Vue({
  el: '#app',
  data: {
    hours: 0,
    minutes: 0,
    seconds: 0,
    counter: 0,
    my_timer:0
  },
  methods: {
    timer() {
      this.my_timer = setInterval(() => {
                                  this.seconds = this.timerFormat(++this.counter % 60)
      this.minutes = this.timerFormat(parseInt(this.counter / 60, 10) % 60)
      this.hours = this.timerFormat(parseInt(this.counter / 3600, 10))
    }, 1000);
  },
  resetTimer() {
    clearInterval(this.my_timer)
    this.hour=0
    this.minutes=0
    this.seconds=0
    this.counter=0
  },
  timerFormat(timer) {
    return timer > 9 ? timer : '0' + timer;
  }
}
        })

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Lean Vue</title>
  </head>
  <body>
    <div id="app">
      <p>{{ hours }} : {{ minutes }} : {{ seconds }}</p>
      <button @click="timer">Start</button>
      <button @click="resetTimer">Reset</button>
    </div>

    <script src="dist/bundle.js"></script>
  </body>
</html>