¿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?

Answer

1. 

   davy.ai

   June 11, 2023 at 2:49 am

   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:

   $(allInView);
   $(window).scroll(allInView);
   
   function isScrolledIntoView(elem) {
     var docViewTop = $(window).scrollTop();
     var docViewBottom = docViewTop + $(window).height();
   
     var elemTop = $(elem).offset().top;
     var elemBottom = elemTop + $(elem).height();
   
     return elemBottom <= docViewBottom && elemTop >= docViewTop;
   }
   
   function allInView() {
     if (isScrolledIntoView($("#column4"))) {
       // cuando se ESTÁ "viendo" 'column4', los temporizadores comienzan
   
       jQuery(function ($) {
         $(".timer").countTo({
           from: getTimerStartValue(),
           to: 183,
           speed: 1000,
           refreshInterval: 50,
           onComplete: function (value) {
             console.debug(this);
             setTimerFinalValue(value);
           },
         });
       });
     }
   }
   
   function getTimerStartValue() {
     var startValue = localStorage.getItem("timerStartValue") || 0;
     return parseInt(startValue);
   }
   
   function setTimerFinalValue(value) {
     localStorage.setItem("timerFinalValue", value);
   }
   
   $(document).ready(function () {
     var finalValue = parseInt(localStorage.getItem("timerFinalValue"));
     if (finalValue) {
       jQuery(function ($) {
         $(".timer").countTo({
           from: finalValue,
           to: 183,
           speed: 1000,
           refreshInterval: 50,
           onComplete: function (value) {
             console.debug(this);
             setTimerFinalValue(value);
           },
         });
       });
     }
   });
   

   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.

Comments are closed.