Actualizar página cada x tiempo con jQuery

En este tutorial aprenderemos cómo actualizar una página automáticamente cada cierto tiempo utilizando el lenguaje jQuery.

Si no tienes todavía enlazado jQuery en tu proyecto puedes seguir nuestro tutorial Enlazar proyecto con jQuery

Actualizar página

Para actualizar la página completamente usaremos la función reload()

<!--Código del botón Actualizar página-->
<input type="button" id="recargar" value="Actualizar página"/>
<script> 
    //Creamos un evento para el botón
    $("#recargar").click(function(){
        //Al pulsar el botón actualiza la página
        location.reload();
    });
</script>

Para actualizar cada X tiempo usaremos setTimeout() y  reload().

<script>
  //Cuando la página esté cargada completamente
  $(document).ready(function(){
    //Cada 10 segundos (10000 milisegundos) se ejecutará la función refrescar
    setTimeout(refrescar, 10000);
  });
  function refrescar(){
    //Actualiza la página
    location.reload();
  }
</script>

jQuery también nos permite refrescar partes de la página sin tener que hacerlo con la página completa.

Veamos un ejemplo de un div que se carga dinámicamente desde un archivo php

<script>
  //Cuando la página esté cargada completamente
  $(document).ready(function(){
    //Cada 10 segundos se ejecutará la función refrescar
    setTimeout(refrescar, 10000);
  });
  function refrescar(){
    //Actualiza la el div con los datos de imagenes.php
    $("#galeria").load("imagenes.php");
  }
</script>

Por último veamos otro ejemplo con una función que recibe por parámetro el tiempo de refresco

<script>
  //Declaramos la función que recibe el tiempo
  function refrescar(tiempo){
    //Cuando pase el tiempo elegido la página se refrescará 
    setTimeout("location.reload(true);", tiempo);
  }
  //Podemos ejecutar la función de este modo
  //La página se actualizará dentro de 10 segundos
  refrescar(10000);
</script>

Más tutoriales de jQuery

Si te ha gustado no olvides compartir en redes sociales.

[addthis tool=»addthis_inline_share_toolbox_6jt6″]

Espero que te haya servido. Cualquier duda deja un comentario. Un saludo