The Vue countdown timer speeds up when the watched variable is modified from a method

Question

The Vue countdown timer speeds up when the watched variable is modified from a method

Recently delved into Vue and JS. I've implemented a watcher for a timerCount variable (initialized to 5) that triggers a 5-second timer. When the variable reaches zero, certain code is executed, and then I reset the timer to 5 to start over. Everything works as expected, but when a click event invokes a method which executes different code and resets the timer to 5, the timer speeds up (twice as fast).

After doing some research online, it seems like there are multiple instances of watchers/timers running simultaneously, causing the acceleration. How can I resolve this issue so my method simply resets the timer normally?

watch: {
    timerCount: {
        handler(value){
            //timer for 5 seconds
            if (value>0){
                setTimeout(() => {
                    this.timerCount--;
                }, 1000);
            }
            //if timer hits 0, execute code and reset timerCount to 5 seconds, this works fine
            else{
                /* Code */
                this.timerCount=5
            }
        },
        immediate: true,
    }
},

methods:{
    //this resets the timer, but now it runs twice as fast, unsure why.
    otherMethod(){
        /* Code */
        this.timerCount=5
    }

}

Any suggestions on how to solve this dilemma?

Referenced source: How do I create a simple 10 seconds countdown in Vue.js

javascript vue.js timer settimeout vuejs3

Answer 1

Answer №1

When coding, if you're observing timerCount, any changes made to that variable will trigger Vue to watch it again when running otherMethod. This means the watcher and its handler will run repeatedly every time timerCount is updated.

Instead of using a watcher, you could initiate your timer in the created event using setInterval (not setTimeout). setInterval executes your code at intervals, but not strictly every 1000ms - it could be slightly more or less.

You can create a function inside setInterval with a delay of around 100ms, allowing you to track whether 5 seconds have passed or not.

Answer 2

When coding, if you're observing timerCount, any changes made to that variable will trigger Vue to watch it again when running otherMethod. This means the watcher and its handler will run repeatedly every time timerCount is updated.

Instead of using a watcher, you could initiate your timer in the created event using setInterval (not setTimeout). setInterval executes your code at intervals, but not strictly every 1000ms - it could be slightly more or less.

You can create a function inside setInterval with a delay of around 100ms, allowing you to track whether 5 seconds have passed or not.

Answer 3

Answer №2

Implement a function called initializeWatcher() that sets up a watcher and stores the watcher instance in a data variable. Invoke the initializeWatcher() function during component creation. Whenever you need to make changes to the watched variable, first stop the watcher, update the variable, and then create the watcher again. (refer to whenUpdatingVariable())

For more information, check out the documentation on creating watchers and stopping watchers

data(){
 return{
  myWatcherInstance: null,
  timerCount: 10
 }
}
methods: {
 whenUpdatingVariable(){
  // stop watcher/unwatch
  this.myWatcherInstance();

  // update variable
  this.timerCount = 20;

  // create watcher again
  this.initializeWatcher();
 },
 initializeWatcher(){
    this.myWatcherInstance = this.$watch('timerCount', () => {
        setTimeout(() => {
          this.timerCount--;
        }, 1000);
      })
    }
  }
},
created(){
 this.initializeWatcher();
}

Answer 4

Implement a function called initializeWatcher() that sets up a watcher and stores the watcher instance in a data variable. Invoke the initializeWatcher() function during component creation. Whenever you need to make changes to the watched variable, first stop the watcher, update the variable, and then create the watcher again. (refer to whenUpdatingVariable())

For more information, check out the documentation on creating watchers and stopping watchers

data(){
 return{
  myWatcherInstance: null,
  timerCount: 10
 }
}
methods: {
 whenUpdatingVariable(){
  // stop watcher/unwatch
  this.myWatcherInstance();

  // update variable
  this.timerCount = 20;

  // create watcher again
  this.initializeWatcher();
 },
 initializeWatcher(){
    this.myWatcherInstance = this.$watch('timerCount', () => {
        setTimeout(() => {
          this.timerCount--;
        }, 1000);
      })
    }
  }
},
created(){
 this.initializeWatcher();
}

The Vue countdown timer speeds up when the watched variable is modified from a method

Answer №1

Answer №2

Similar questions

Is there a glitch in the console when sorting an array of dates?

Send the user to the chosen option in the dropdown menu

issue concerning slide functionality and ajax integration

Issues with 'md-sidenav' in AngularJs failing to respond to click event in Firefox

Feeling lost about arrow functions in JavaScript

Struggling to retrieve user input from a textfield using React framework

Attempt running the Vuetify documentation on your local machine

How to dynamically insert a new row below a specific row with a sliding animation in jQuery

NextJS configuration facing an issue with rewrite rules not functioning as intended

Obtaining the initial variable from an array - a simple guide

Adding images to your SVG using Bobril is a simple process that can add visual

Modify the content and display of a stationary div based on vertical positions

Troubleshooting issue: Click function not responding inside Bootstrap modal

What is the reason behind the need to provide the complete string in my 'includes' statement?

What is the best way for me to obtain cut documents?

Angular fails to include the values of request headers in its requests

In the realm of ASP.NET, the Razor FormExtensions.BeginForm Method holds the

My Vuex component is not updating when the state changes

Uploading pictures to Imgur without the need for an API key

PHP array does not retain a variable