Estoy desarrollando una cuenta regresiva llamada por una función. El objetivo es reiniciar la cuenta regresiva cada vez que el usuario responde una pregunta en el juego y se instancia la siguiente pregunta. El problema al que me he enfrentado es que cada vez que llamo a la función antes de que se acabe el tiempo, la siguiente cuenta atrás se acelera y salta números.
<template> <div> {{ countDown }} </div> </template> <script> export default { data() { return { countDown: 10, }; }, method: { countDownTimer() { const timer = setInterval(() => { if (this.countDown > 0) { this.countDown--; } else { clearInterval(timer); } }, 1000); }, nextquestion(){ this.countDownTimer(); }, }, mounted() { this.countDownTimer(); }, }; </script>Después de mucha investigación e intentos, pude resolver esto con algunos cambios:
<template> <div> {{ countDown }} </div> </template> <script> export default { data() { return { countDown: 10, }; }, created(){ this.timer = 0; }, method: { countDownTimer() { clearInterval(this.timer); this.timer = setInterval(() => { if (this.countDown > 0) { this.countDown--; } else { clearInterval(this.timer); } }, 1000); }, nextquestion(){ this.countDown = 10; this.countDownTimer(); }, }, mounted() { this.countDownTimer(); }, }; </script>