Vue.js Timer Tracker

Question

Vue.js Timer Tracker

I am attempting to create a countdown timer in Vue.js that displays the remaining time.

new Vue({
    el: "#app",
    data: {
        timer: 25,
        message2: "",
        counter: false,
        interval: null
    },
    methods: {
        startTimer() {
            this.interval = setInterval(this.countDown(), 1000);
        },
        countDown() {
            if (this.counter === false) {
                var n = this.timer;
                this.counter = true;
            } else if (n > 0) {
                n -= 1;
                this.message2 = "You have " + n + "seconds left.";
            } else {
                clearInterval(this.interval);
                this.counter = false;
                this.message2 = "Your time is up!"
            }
        },

However, I am encountering an issue where the message2 does not update with each tick of the Interval when the countDown() function is called. Instead, it only runs once after the initial execution.

javascript vue.js vuejs2

Answer 1

Answer №1

In order to correctly use setInterval, make sure to pass the function itself rather than its result:

startTimer() {
  this.interval = setInterval(this.countDown, 1000);
}

Furthermore, there are some errors in the countdown() function that need attention (such as mistakenly defining n within an if statement and using it outside of that block, leading to undefined behavior). Additionally, be cautious when modifying local variables without affecting the intended target variable this.timer.

countDown() {
  var n = this.timer;
  if (!this.counter) {
    this.counter = true;
  } else if (n > 0) {
    n = n - 1;
    this.timer = n;
    this.message2 = "You have " + n + " seconds left.";
  } else {
    clearInterval(this.interval);
    this.counter = false;
    this.message2 = "Your time is up!";
  }
}

Answer 2

In order to correctly use setInterval, make sure to pass the function itself rather than its result:

startTimer() {
  this.interval = setInterval(this.countDown, 1000);
}

Furthermore, there are some errors in the countdown() function that need attention (such as mistakenly defining n within an if statement and using it outside of that block, leading to undefined behavior). Additionally, be cautious when modifying local variables without affecting the intended target variable this.timer.

countDown() {
  var n = this.timer;
  if (!this.counter) {
    this.counter = true;
  } else if (n > 0) {
    n = n - 1;
    this.timer = n;
    this.message2 = "You have " + n + " seconds left.";
  } else {
    clearInterval(this.interval);
    this.counter = false;
    this.message2 = "Your time is up!";
  }
}

Answer 3

Answer №2

It has been mentioned by others that passing your function to setInterval is the correct approach, rather than invoking it and passing its return value.

In addition, when you run the line n = this.timer, you are essentially calling the getter set up by Vue on this.timer, and assigning the number 25 to your variable n. However, since n goes out of scope once the function completes, your copy of 25 is lost. Consequently, in the next iteration of your function (one second later), n is undefined. This leads to the else clause clearing the interval, causing the elseif clause to never be executed.

To ensure your code functions correctly, I suggest a minor modification: include n: undefined, in your data:{} so that it can be monitored by Vue. Subsequently, replace all instances of n with this.n.

Once you have resolved that issue, here are some simplifications you might consider:

Moving this.n = this.timer assignment inside startTimer
If you assign this.interval = undefined when clearing the interval, this.counter becomes unnecessary as you can just verify if this.interval exists
Transforming message2 into a "computed" property
Adding an if statement within startTimer to prevent adding a second interval if one is already active (e.g. preventing multiple clicks on a "start timer" button before the initial timer finishes)

Answer 4

It has been mentioned by others that passing your function to setInterval is the correct approach, rather than invoking it and passing its return value.

In addition, when you run the line n = this.timer, you are essentially calling the getter set up by Vue on this.timer, and assigning the number 25 to your variable n. However, since n goes out of scope once the function completes, your copy of 25 is lost. Consequently, in the next iteration of your function (one second later), n is undefined. This leads to the else clause clearing the interval, causing the elseif clause to never be executed.

To ensure your code functions correctly, I suggest a minor modification: include n: undefined, in your data:{} so that it can be monitored by Vue. Subsequently, replace all instances of n with this.n.

Once you have resolved that issue, here are some simplifications you might consider:

Moving this.n = this.timer assignment inside startTimer
If you assign this.interval = undefined when clearing the interval, this.counter becomes unnecessary as you can just verify if this.interval exists
Transforming message2 into a "computed" property
Adding an if statement within startTimer to prevent adding a second interval if one is already active (e.g. preventing multiple clicks on a "start timer" button before the initial timer finishes)

Vue.js Timer Tracker

Answer №1

Answer №2

Similar questions

Refreshing component after changing state in vue.js

Applying autocomplete (Jquery) functionality to dynamically loaded partial views using AJAX in MVC4

Sending information from one page to another and then sending it once more

The jQuery click and load function are failing to function as expected

Matching two arrays and performing an operation on them

Guide to extracting additional data from a JSON array upon selection of a value within an option tag using jQuery

Implement a loading spinner to display each time a computed method is invoked in a Vue.js

Working with content that includes Laravel Blade code in Vue.js

Combining arrays and encoding in Json格式

When it comes to Redux, is it considered an anti-pattern to pass an event from a presentational component to a container component

Error: Unable to locate sportsRecord due to missing function

Exploring the Safari browser with Polymer 2.0

Dynamic Bootstrap Tab menu slider with movable functionality when the limit is reached

Ways to perform a redirect following data retrieval from a post request

Differences between JavaScript's window.onload and body.onload functionsWhen

The latest on rectAreaLight enhancements in three.js

The Material UI dialog is causing issues for CKEditor 4

What is the best method to access nested objects in react-native when working with this.state?

Encountering AngularJS promise data parsing issues

Issue encountered with Ionic and ssh2: process.binding is not supported