1

Estoy desarrollando una web y necesito que la página me actualice cada 5 segundos, pero que pueda pausar la actualización en cualquier momento. Tengo un botón para ello.

He desarrollado el siguiente script, pero no funciona. Cuando pulso el botón la variable cambia a 2 y el valor del botón a "Activar", por lo que no deberia realizar el setTimeout, pero la web se actualiza igualmente.

¿Que puede estar pasando? Gracias de antemano!

<script>
 //Cuando la página esté cargada completamente
 $(document).ready(function(){
     var estado = 1;   
     alert(estado);
   //Cada 10 segundos (10000 milisegundos) se ejecutará la función refrescar    
   $('.botonactivar').click(function() {
       if($(this).attr("value") == "Parar"){
           $(this).val("Activar");
           estado = 2;  
           alert(estado);
       }else{
           $(this).val("Parar");     
           estado = 1;   
           alert(estado); 
       }
   });

   if(estado == 1){
       setTimeout(refrescar, 5000); 
   }
 });

 function refrescar(){
   //Actualiza la página
   location.reload();
 }
</script>


3 respuestas 3

4

El estado inicial es 1 por lo que está entrando al segundo bloque if y creando un timeout, no importa si haces click y cambias el estado a 2, el timeout todavía existe.

Para solucionarlo, debes guardar el id que identifica al timeout y "limpiarlo" al desactivar la actualización

var timeoutID = null;
$('.botonactivar').click(function() {
       if($(this).attr("value") == "Parar"){
           $(this).val("Activar");
           estado = 2;  
           alert(estado);
       }else{
           $(this).val("Parar");     
           estado = 1;   
           alert(estado); 
       }
   });

   if(estado == 1){
       timeoutID = setTimeout(refrescar, 5000); 
   } else {
       clearTimeout(timeoutID);
       timeoutID = null;
   } 

Algunos consejos no solicitados:

  • usa un boolean para manejar el estado dado que solo tienes 2 estados
  • en lugar de configurar la condición basada en el texto del botón, utiliza el estado
  • alert bloquea la ejecución de la página, creo que es mejor usar console.log
  • Ambos bloques if están "haciendo lo mismo", puedes unificarlos

Actualización Una descripción de cómo está funcionando el código:

  • se setea la variable timeoutID con un valor de nulo
  • se agrega un listener a .botonactivar cuando se hace click
  • Verifica el valor de estado y crea un timeout si el valor es 1 o basado en el nuevo código true
  • Este último paso solo lo hace una vez

Para que esa condición la compruebe cada vez que se hace click en el botón, se debe mover el código dentro de click, o llamar a una función que compruebe el estado, aquí va el código completo:

<script>
  //Cuando la página esté cargada completamente
  $(document).ready(function(){
    var timeoutID = null;
    var estado = true;

    function comprobarEstado() {
      if(estado == true){
        console.log("activo");
        timeoutID = setTimeout(refrescar, 5000);             
      } else {
        console.log("desactivo");
        clearTimeout(timeoutID);
        timeoutID = null;
      } 
    }
        $('.botonactivar').click(function() {
            if(estado){
              $(this).val("Activar");
              estado = false;
            } else {
              $(this).val("Parar");
              estado = true;
            }
          comprobarEstado();
        });

    comprobarEstado();

    function refrescar(){
        //Actualiza la página
        location.reload();
  }    
 });  
</script>
2
  • Muchas gracias por la aportación. Voy a probarlo a ver si lo conseguimos. Poco a poco vamos mejorando! :)
    – Jesus
    Commented el 7 feb. 2022 a las 19:30
  • Ya entiendo el funcionamiento y además funciona a la perfección. Muchas gracias por tu ayuda, no solo has resuelto mi problema si no que tambien me has enseñado. Mil gracias!
    – Jesus
    Commented el 7 feb. 2022 a las 22:25
0

Intenta agregar la función que recarga la pagina dentro de la condición inicial, así por ejemplo:

<script>
//Cuando la página esté cargada completamente
$(document).ready(function(){
   var estado = 1;   
   alert(estado);
   //Cada 10 segundos (10000 milisegundos) se ejecutará la función refrescar    
   $('.botonactivar').click(function() {
       if($(this).attr("value") == "Parar"){
           $(this).val("Activar");
           estado = 2;  
           alert(estado);
       }else{
           $(this).val("Parar");     
           estado = 1;   
           alert(estado);
           setTimeout(refrescar, 5000);
    }
  });
  function refrescar(){
     //Actualiza la página
     location.reload();
  }
</script>
1
  • Hola Steven, gracias por tu aporte! el "problema es que si agrego la funcion a la condición inicial solo me refresca la página cuando pulso el botón. Necesito que la página se refresque todo el tiempo, y solo se pause cuando le de al botón
    – Jesus
    Commented el 7 feb. 2022 a las 16:51
0

he seguido la idea de "Aguardientico" (gracias!). La página actualiza desde el principio cada 5 segundos, pero no me para la actualización cuando pulso en parar. Solo cambia el texto del botón.

Este es el código actualizado:

<script>
  //Cuando la página esté cargada completamente
  $(document).ready(function(){
    var timeoutID = null;
    var estado = true;
        $('.botonactivar').click(function() {
            if($(this).attr("value") == "Parar"){
                $(this).val("Activar");
                estado = false;  
            }else{
                $(this).val("Parar");     
                estado = true;   
            }
        });

        if(estado == true){
            console.log("activo");
            timeoutID = setTimeout(refrescar, 5000);             
        } else {
            console.log("desactivo");
            clearTimeout(timeoutID);
            timeoutID = null;
        } 

    function refrescar(){
        //Actualiza la página
        location.reload();
  }    
 });  
</script>

En la consola solo aparece "activo", nunca llega a "desactivo". No llego a entender que ocurre, ya que al pulsar el botón el estado es igual a false y deberia dejar de realizar el timeout. Gracias!

2
  • Recuerda que, si una respuesta te ayudó, puedes marcarla como aceptada (con el tick junto a los votos de la respuesta). Así otros sabrán cómo se resuelve esa pregunta! :)
    – Alfabravo
    Commented el 7 feb. 2022 a las 20:20
  • @jesus actualicé la respuesta con una explicación de lo que está pasando y cómo resolverlo Commented el 7 feb. 2022 a las 21:07

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.