I am facing an issue in my VUE SPA where I have a component running a recursive countdown using setInterval functions. The problem is that the countdown continues running in the background even when I switch to another view, but I want to destroy the setInterval once I switch views.
I attempted to use a global data variable to store the countdowns and then destroy it in the destroyed hook, but unfortunately, it did not work as expected.
Below is a snippet of my code:
data: function () {
return {
counters: ""
}
}),
methods: {
countdown(index, exp) {
...
this.counters = setInterva()
...
},
},
destroyed(){
console.log(this.counters); // returns a progressive integer
clearInterval(this.counters);
console.log(this.counters); // returns same integer
this.counters = 0;
console.log("destroyed");
}
However, when checking in the console, I observed the following:
destroyed
app.js:64433 0
app.js:64398 Missing counter_1 . <--- which indicates that the counter is still running
If anyone has any suggestions or solutions, it would be greatly appreciated!