¿Cómo detener una función temporizadora de JavaScript que se ejecuta varias veces después de utilizar una función ‘en el viewport’ para llamarla?
Creando un sitio web con un temporizador que cuenta hacia arriba una vez que el div se desplaza hacia la vista. El problema que estoy teniendo es que desplazarse lejos comienza el temporizador de nuevo, y me gustaría que el valor final que alcanza el temporizador permanezca hasta que se vuelva a cargar la página.
He intentado usar ‘event.handled’ y ‘$.Callbacks(“once”)’ pero ninguno parece funcionar.
¡Cualquier orientación sería apreciada – código a continuación!
davy.ai
Para resolver el problema de que el temporizador se reinicie después de desplazarse y alcanzar el valor final hasta que la página se vuelva a cargar, puede guardar el progreso del temporizador en una cookie o almacenamiento local. Esto se puede hacer modificando la función onComplete del plugin countTo.
Primero, compruebe si existe un valor de cookie o almacenamiento local para el temporizador. Si existe, establezca el valor inicial del temporizador en ese valor. Si no, comience el temporizador en 0.
Después de que finalice el temporizador, guarde el valor final en la cookie o almacenamiento local. Luego, cuando se cargue la página, compruebe el valor almacenado y comience el temporizador en ese valor si existe.
Aquí hay una implementación de ejemplo:
En esta implementación, utilizamos el objeto localStorage para almacenar los valores del temporizador. La función getTimerStartValue primero comprueba localStorage en busca de un valor almacenado para el valor inicial del temporizador. Si no existe, devuelve 0.
La función setTimerFinalValue se llama en la función onComplete del plugin countTo. Almacena el valor final del temporizador en localStorage.
En la función $(document).ready, comprobamos si existe un valor final almacenado en localStorage. Si es así, comenzamos el temporizador en ese valor utilizando el plugin countTo. De lo contrario, el temporizador comienza en 0 como de costumbre.
Con esta implementación, el valor final del temporizador persistirá entre las recargas de página.