muy nuevo en Vue y JS. Configuré un observador para una variable timerCount (inicialmente establecida en 5) que hace un temporizador de 5 segundos. Cuando la variable llega a 0, se ejecuta algún código y restablezco el temporizador a 5 para reiniciarlo. Esto funciona perfectamente bien, sin embargo, tengo un evento de clic que llama a un método, que ejecutará un código diferente y luego restablecerá el temporizador a 5 también, pero ahora mi temporizador está acelerado (el doble de rápido).
Por lo que pude encontrar al buscar en Google, parece que hay varias instancias de observador/temporizador ejecutándose al mismo tiempo, que es lo que provoca la aceleración. ¿Cómo soluciono esto para que mi método simplemente reinicie el temporizador como de costumbre?
watch: { timerCount: { handler(value){ //timer for 5 seconds if (value>0){ setTimeout(() => { this.timerCount--; }, 1000); } //if timer hits 0, execute code and reset timerCount to 5 seconds, this works fine else{ /* Code */ this.timerCount=5 } }, immediate: true, } }, methods:{ //this resets the timer, but it now goes twice as fast, don't know why. otherMethod(){ /* Code */ this.timerCount=5 }}
¿Alguna ayuda?
Aquí está la publicación donde obtuve este código: ¿Cómo creo una cuenta regresiva simple de 10 segundos en Vue.js?
En tu código, estás viendo timerCount. Cuando realiza un cambio en su timeCount significa que, cuando ejecuta otherMethod, Vue lo observa, luego ejecuta el observador nuevamente y el controlador para este observador se ejecuta nuevamente. Cada vez que cambia la variable timerCount, su observador se ejecuta una y otra vez.
En realidad, sin observador, puede comenzar su tiempo dentro de su evento creado con setInterval (no setTimeout). setInterval ejecuta su código dentro del intervalo dado pero no estrictamente 1000ms. Puede ser 1005ms o menos.
Puede crear alguna función dentro de setInterval y darle como 100 ms y controlar el tiempo si pasa 5 segundos o no.