Restart the Interval once it has been reset

Question

Restart the Interval once it has been reset

Is there a way to restart the Interval after it has been cleared? I am trying to make a button clickable once every 11 seconds. I have disabled the button while the timer is greater than 0, and once it reaches 0, the button becomes clickable again. The current code I have seems to work, but if I call the setInterval() function multiple times, the timer starts counting down too quickly. Are there any solutions for this issue?

data:{
    sTimer:11,
    sDisabled:true,
    asd:null
  },
  methods:{
        testing(){
        this.sTimer--;
      if(this.sTimer == 0){
        clearInterval(this.asd);
        this.sTimer= 11;
        this.sDisabled = false;
      }else{
        this.sDisabled = true;
      }
    },
    specialAttack(){
      setInterval(() => this.testing(), 1000)
    }
  },
  created(){
    this.asd = setInterval(() => this.testing(), 1000);
  }

<button class="specialAttack" :disabled="sDisabled" @click="specialAttack(); testing()">Special Attack {{ sTimer }}</button>

javascript vue.js vuejs2

Answer 1

Answer №1

It seems there are a few errors in your approach that need to be addressed. Firstly, if you want to accomplish this task, it is recommended to use the setTimeout function instead of setInterval. This is because setInterval will repeatedly execute after a set time interval, which could be causing the issue of it being called twice when you click the button. Furthermore, it would be wise to create a reusable function for this purpose and then call it during document creation, rather than creating two separate intervals and calling them individually.

By following these guidelines, your final code should resemble something like the following:

HTML

<button class="specialAttack" :disabled="sDisabled" @click="specialAttack();">Special Attack {{ sTimer }}</button>

Javascript

data: () => {
    return {
      sTimer: 11,
      sDisabled: false,
      asd: null
    };
},
methods: {
    specialAttack() {
      clearTimeout(this.asd); // Alternatively, you can also disable it here by using: this.sDisabled = true
      if (this.sTimer > 0) {
        this.asd = setTimeout(() => {
          this.sDisabled = true;
          this.sTimer -= 1;
          this.specialAttack();
        }, 1000);
      } else {
        clearTimeout(this.asd);
        this.sTimer = 11;
        this.sDisabled = false;
      }
    }
  },
created() {
    this.specialAttack();
}

You can see a functioning demo here:

https://codesandbox.io/s/sweet-feynman-gsjocn

Answer 2

It seems there are a few errors in your approach that need to be addressed. Firstly, if you want to accomplish this task, it is recommended to use the setTimeout function instead of setInterval. This is because setInterval will repeatedly execute after a set time interval, which could be causing the issue of it being called twice when you click the button. Furthermore, it would be wise to create a reusable function for this purpose and then call it during document creation, rather than creating two separate intervals and calling them individually.

By following these guidelines, your final code should resemble something like the following:

HTML

<button class="specialAttack" :disabled="sDisabled" @click="specialAttack();">Special Attack {{ sTimer }}</button>

Javascript

data: () => {
    return {
      sTimer: 11,
      sDisabled: false,
      asd: null
    };
},
methods: {
    specialAttack() {
      clearTimeout(this.asd); // Alternatively, you can also disable it here by using: this.sDisabled = true
      if (this.sTimer > 0) {
        this.asd = setTimeout(() => {
          this.sDisabled = true;
          this.sTimer -= 1;
          this.specialAttack();
        }, 1000);
      } else {
        clearTimeout(this.asd);
        this.sTimer = 11;
        this.sDisabled = false;
      }
    }
  },
created() {
    this.specialAttack();
}

You can see a functioning demo here:

https://codesandbox.io/s/sweet-feynman-gsjocn

Restart the Interval once it has been reset

Answer №1

Similar questions

Navigating with AngularJS Front-End Routing using ui-router

Capturing page titles accurately for timeonsite tracker in a single-page Angular app is challenging when navigating to other pages

Invoke this (public) function from within a private function

Determining the variance between two datepickers

Setting a radio button to be checked in AngularJS using stored data

jQuery's height calculations for elements are inaccurate

Utilize Javascript to access and manipulate the input using the document

Learn the proper way to utilize the function(global) method by applying it to the current context with

In Node.js and Express, it is important to note that a variable must be declared before

What is the best way to showcase a JSON array in a tabular layout?

The lack of definition for the props value poses an issue in React.js Hooks

ng-table malfunctioning with an injection error

Increase initial zoom for React Three Fiber OrbitControls to provide a wider view

Obtain the URL value using jQuery and place it inside a <span> element

What is the method for retrieving values from an object using keys that are subject to change?

Creating connections between variables and elements in nested ngRepeats in Angular

Check out this handy guide on how to use jQuery for sliding effects: [link

unemployed with XMLHttpRequest not functioning

Issue with loading the main.css file

Strange Behavior of ngIf and @Input in Angular 2