The accumulation of input using setInterval is not effective

Question

The accumulation of input using setInterval is not effective

I need some help with my code. Please take a look at this link here. I want the input to count up from zero and hide when I click the "change" button. But when I show the input again, I want its value to reset back to zero. Can anyone guide me on how to achieve this?

<script src="//unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <input :value="change" v-if="val1">
  <br/>
  <button @click="switchOn">Change</button>


</div>

var Main = {
    data() {
      return {
        val1: false,
                val2: 0,
      }
    },
    methods: {
    switchOn(){
    this.val1=this.val1==false?true:false
    },
    addUp(){
    setInterval(function(){this.val2++},2000);
    }
    },
    computed:{
    change(){ this.addUp(); return this.val2; }

    }
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

javascript vue.js

Answer 1

Answer №1

Essentially, in this scenario, the utilization of clearInterval is necessary to halt the interval that has been initiated and reset the counter back to zero.

console.clear()
var Main = {
  data() {
    return {
      val1: false,
      val2: 0,
      interval: null
    }
  },
  methods: {
    switchOn(){
      this.val1 = !this.val1
      if (!this.val1){
        clearInterval(this.interval)
        this.interval = null
        this.val2 = 0
      } else {
       this.addUp()
      }
    },
    addUp(){
      this.interval = setInterval(() => this.val2++, 2000);
    }
  },
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <input v-model="val2" v-if="val1">
  <br/>
  <button @click="switchOn">Change</button>
  {{val1}}: {{val2}}

</div>

Answer 2

Essentially, in this scenario, the utilization of clearInterval is necessary to halt the interval that has been initiated and reset the counter back to zero.

console.clear()
var Main = {
  data() {
    return {
      val1: false,
      val2: 0,
      interval: null
    }
  },
  methods: {
    switchOn(){
      this.val1 = !this.val1
      if (!this.val1){
        clearInterval(this.interval)
        this.interval = null
        this.val2 = 0
      } else {
       this.addUp()
      }
    },
    addUp(){
      this.interval = setInterval(() => this.val2++, 2000);
    }
  },
}
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')

<script src="//unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <input v-model="val2" v-if="val1">
  <br/>
  <button @click="switchOn">Change</button>
  {{val1}}: {{val2}}

</div>

The accumulation of input using setInterval is not effective

Answer №1

Similar questions

Properly handling the use of single and double quotation marks in variable declarations within a JavaScript file

Preload-webpack-plugin does not support pre-fetching files

Tips for managing image uploads while incorporating pre-set error detection into a form

Retrieve the function-level variable within the while loop's else statement

How can I update the value of a span element that was added to the HTML document through an AJAX request?

In what ways can you toggle the visibility of table rows and data dynamically with the onchange event in HTML?

angular and node: troubleshooting the $http.get error

Retrieve the Javascript variable and assign it to a PHP variable

What is the best way to use ReactJS to remove the last 3 characters from a selected text?

Having trouble with Ajax.updater?

When using Vue.js, emitting an array to a child component, mapping that array in the child, and then emitting an event to the parent may cause the developer tool to display that the

The angular datepicker functionality seems to be malfunctioning

Automatically increase the height of a text area as you type beyond the maximum width limit

What is the best approach for rendering content to a page in ReactJS when a user clicks on a dynamic URL?

Bringing in a script and invoking a function on a specific variable

Can we retrieve the body from an Axios post request catch block?

Elevate your website's design with Vue and create eye-catching CSS

The Intersection Observer API is not compatible with using transform: translateX()

Switch the appearance between two elements

Does the unique identifier of the element remain constant in jQuery?