Why is my timer function speeding past too swiftly?

Question

Why is my timer function speeding past too swiftly?

My vue.js countdown function is updating too quickly.

Displayed below is the data section

data() {
        return {
            selected: [],
            countdown: timerLimit
        }

Here is the countdown method

countdownTimer() {
        this.countdown = 60;
            var downloadTimer = setInterval(() => {
            if(this.countdown <= 0){
                clearInterval(downloadTimer);
                if (this.thisUser.captain) {
                        Store.submitTurnEnd();
                    }
            }
            this.countdown -= 1
            console.log(this.countdown)
            }, 1000);
        },

I have noticed that after a few clicks, the countdown function speeds up. I believe I need to modify the data section, but I am uncertain of the correct approach.

Thank you for your assistance.

javascript vue.js countdowntimer

Answer 1

Answer №1

Perhaps including another variable in your data can be beneficial:

data() {
        return {
            selected: [],
            countdown: timerLimit,
            isCountdownActive: false
}

Here is the method:

countdownTimer() {
        // Check if the countdown is already active
        if(this.isCountdownActive == true) return;

        // Activate the countdown for the first time
        this.isCountdownActive = true

        this.countdown = 60;
            var downloadTimer = setInterval(() => {
            if(this.countdown <= 0){
                clearInterval(downloadTimer);
                if (this.thisUser.captain) {
                        Store.submitTurnEnd();
                }

                // Reset countdown activity to false upon completion
                this.isCountdownActive = false
            }
            this.countdown -= 1
            console.log(this.countdown)
            }, 1000);
},

Answer 2

Perhaps including another variable in your data can be beneficial:

data() {
        return {
            selected: [],
            countdown: timerLimit,
            isCountdownActive: false
}

Here is the method:

countdownTimer() {
        // Check if the countdown is already active
        if(this.isCountdownActive == true) return;

        // Activate the countdown for the first time
        this.isCountdownActive = true

        this.countdown = 60;
            var downloadTimer = setInterval(() => {
            if(this.countdown <= 0){
                clearInterval(downloadTimer);
                if (this.thisUser.captain) {
                        Store.submitTurnEnd();
                }

                // Reset countdown activity to false upon completion
                this.isCountdownActive = false
            }
            this.countdown -= 1
            console.log(this.countdown)
            }, 1000);
},

Answer 3

Answer №2

Feel free to give this a shot!

const myVueApp = new Vue({
  el: "#app",
  data: {
    counter: 5
  },
  methods: {
    startCountdown: function() {
        let interval;

        interval = setInterval(() => {
            if (this.counter > 0) {
                this.counter = this.counter - 1;
            } else {
                clearInterval(interval);
                // Add your custom logic here
            }
        }, 1000);
    }
  }
})

Here is the corresponding template section:

<div id="app">
  <h2>Countdown:</h2>
  <h1>{{ counter }}</h1>
  <button v-on:click="startCountdown">Begin</button>
</div>

Answer 4

Feel free to give this a shot!

const myVueApp = new Vue({
  el: "#app",
  data: {
    counter: 5
  },
  methods: {
    startCountdown: function() {
        let interval;

        interval = setInterval(() => {
            if (this.counter > 0) {
                this.counter = this.counter - 1;
            } else {
                clearInterval(interval);
                // Add your custom logic here
            }
        }, 1000);
    }
  }
})

Here is the corresponding template section:

<div id="app">
  <h2>Countdown:</h2>
  <h1>{{ counter }}</h1>
  <button v-on:click="startCountdown">Begin</button>
</div>

Why is my timer function speeding past too swiftly?

Answer №1

Answer №2

Similar questions

The transition in Vue Js is only effective when elements are entering, not when they are

Discovering the method to retrieve files from the public folder via URL in next.js

Creating a carousel of cards using JavaScript, CSS, and HTML

Ensure you have the correct loader specified for Laravel Mix

The dynamically generated hyperlink is not displaying correctly

Is there a specific code repository available that can verify and transform blog comments into XHTML strict format?

Interested in generating buttons automatically based on a JSON file

Guide on executing protractor suites with various users

Unlocking the Secret Code

Challenge encountered while implementing a countdown using a for loop in a node.js application

Utilizing Vue 3's Inject Plugin alongside the powerful Composition API and TypeScript

The body-parser module in express 4.0 is currently not accessible for the route handler

Updating NavBar text dynamically based on user login status in React.JS

npm: Generating debug and production builds while ensuring accurate dependency management

Getting rid of excess white space in ajax search

Error: Trying to access the 'previous' property of an undefined value

Combining CodeIgniter4 with Vue.js and Webpack's devServer to handle CORS issues

sinon: Techniques for stubbing an entire class as opposed to singular methods

Creating a React.js component and setting an initial value within it

Expanding circle with CSS borders on all edges