10-seconds count-up timer / vue.js

Question

I have a working 10 seconds count up timer in vue.js using moment() method, and few thing still not work. I want to set clearInterval when 10seconds after from current time, but it never stops. I tried both variable 'count' and clearInterval(). Anyone can help?


  
    counter1
    {{ time }}

user_5625547 · Answer

You're defining the interval like so:

let interval= () =>{ setInterval(callback, 1000);

interval contains a function, rapped around the setInterval. To cancel the intenrval, we'll need to assign the result value, not in a deeper function.

After removing the function, it can look something like this working demo:

var count=0;
var app = new Vue({
    el: '#app',
    data: {
        time: "0",
        count:0
    },
    mounted() {

        // Create startTime
        this.startTime = moment();

        // Define callback
        let callback = () => {

            // Calculate time diff
            let time_diff = moment().diff(this.startTime);
            this.time = moment.utc(time_diff).format("s");
            this.running=true;

            // Bumb counter
            ++count;

            // Clear interval on count==10
            if (count==10) clearInterval(interval);
        };

        // Start interval
        let interval = setInterval(callback, 1000);
    }
})

div#app  { padding: 30px; margin: 30px auto; width: 300px; text-align: center; border: 1px solid #ccc; box-shadow: 3px 3px 3px #aaa; }
div#time { font-size: 25pt; padding: 5px; margin: 0px auto; background: #ccc; width: 200px; border: 1px solid black; }

/* Hide console wrapper */
.as-console-wrapper { display: none !important; }





  counter1
  {{ time }}

user_14728656 · Answer

We should clear the interval ID returned by setInterval, just like below:

You can get more info from WindowOrWorkerGlobalScope.setInterval() .

10-seconds count-up timer / vue.js

2 Answers