Clear the interval set by an object

Question

Clear the interval set by an object

Currently experimenting with VueJS and managed to develop a basic counter. I'm attempting to reset the setInterval() method using the resetTimer() function, but it's not functioning as expected. Unsure of what steps I might be overlooking.

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>Learning 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>

javascript vue.js vuejs2

Answer 1

Answer №1

To implement an interval timer, create a global variable such as my_timer. You can clear this timer 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.formatTimer(++this.counter % 60)
                    this.minutes = this.formatTimer(parseInt(this.counter / 60, 10) % 60)
                    this.hours = this.formatTimer(parseInt(this.counter / 3600, 10))
                }, 1000);
            },
            pauseTimer() {
                clearInterval(this.my_timer)
            },
            formatTimer(timer) {
                return timer > 9 ? timer : '0' + timer;
            }
    }
})

I hope this explanation is useful.

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.formatTimer(++this.counter % 60)
      this.minutes = this.formatTimer(parseInt(this.counter / 60, 10) % 60)
      this.hours = this.formatTimer(parseInt(this.counter / 3600, 10))
    }, 1000);
  },
  resetTimer() {
    clearInterval(this.my_timer)
    this.hour=0
    this.minutes=0
    this.seconds=0
    this.counter=0
  },
  formatTimer(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>

Answer 2

To implement an interval timer, create a global variable such as my_timer. You can clear this timer 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.formatTimer(++this.counter % 60)
                    this.minutes = this.formatTimer(parseInt(this.counter / 60, 10) % 60)
                    this.hours = this.formatTimer(parseInt(this.counter / 3600, 10))
                }, 1000);
            },
            pauseTimer() {
                clearInterval(this.my_timer)
            },
            formatTimer(timer) {
                return timer > 9 ? timer : '0' + timer;
            }
    }
})

I hope this explanation is useful.

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.formatTimer(++this.counter % 60)
      this.minutes = this.formatTimer(parseInt(this.counter / 60, 10) % 60)
      this.hours = this.formatTimer(parseInt(this.counter / 3600, 10))
    }, 1000);
  },
  resetTimer() {
    clearInterval(this.my_timer)
    this.hour=0
    this.minutes=0
    this.seconds=0
    this.counter=0
  },
  formatTimer(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>

Answer 3

Answer №2

The reason is that this.timer() is resulting in a return value of undefined.

You can make the following adjustments:

timer() {
        this.interval = 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);
}

Also, include the following code:

pauseTimer() {
    clearInterval(this.interval)
 }

Answer 4

The reason is that this.timer() is resulting in a return value of undefined.

You can make the following adjustments:

timer() {
        this.interval = 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);
}

Also, include the following code:

pauseTimer() {
    clearInterval(this.interval)
 }

Answer 5

Answer №3

To reset the timer and start counting again from zero, simply manually set the values like this:

this.hours = 0;
this.minutes = 0;
this.seconds = 0;
this.counter = 0;

There is no need to use clearInterval in this scenario.

Keep in mind that setInterval and clearInterval do not impact your custom "counter" variable, so you have to manage it separately.

If you wish to PAUSE the timer:

clearInterval(this.timer())

This will trigger the timer() method once more.

If your intention was to store the returned value and then utilize it to clear the interval, follow this approach:

    timer() {
        this.intervalTimer = 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.intervalTimer)
    },

Answer 6

To reset the timer and start counting again from zero, simply manually set the values like this:

this.hours = 0;
this.minutes = 0;
this.seconds = 0;
this.counter = 0;

There is no need to use clearInterval in this scenario.

Keep in mind that setInterval and clearInterval do not impact your custom "counter" variable, so you have to manage it separately.

If you wish to PAUSE the timer:

clearInterval(this.timer())

This will trigger the timer() method once more.

If your intention was to store the returned value and then utilize it to clear the interval, follow this approach:

    timer() {
        this.intervalTimer = 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.intervalTimer)
    },

Clear the interval set by an object

Answer №1

Answer №2

Answer №3

Similar questions

What is the best way to add an index to a v-model in Vue.js?

In Internet Explorer 11, React 15.4.1 does not support using objects as valid child components

Tips for capturing an iframe image underneath an HTML5 canvas

[Vue alert]: template option is not valid:

Safari is encountering an issue with the value provided for the width/height attribute in the <svg> element, as it is not a recognized

Attempting to add an image in an Android WebView

Having trouble getting Vue to properly focus on an input field

Creating a comprehensive dataset before initiating an AJAX request using jQuery

a guide on sending api data as a prop in Vue.js

Difficulty encountered when transferring data to child component through props in VueJS

obtain or retrieve a data file from the server

The server cannot be started by Npm, the complete log is available. However, this project has the ability to operate on a different computer

When running a callback function, the "this" of an Angular 2 component becomes undefined

Having issues with the delete button when trying to filter data in a list?

Filling a martial arts training center's drop-down menu with choices using an Ajax response message

Utilizing JavaScript to access and parse an XML file within a client-side environment

What is the maximum level of referencing allowed in v-if conditions?

The ID Token could not be verified due to an invalid jwt.split function

What is the process for pulling out a specific JSON element based on a condition?

Check if the input values are already in the array and if not, then add