Archivo etiqueta setInterval

refresh & reload + setInterval con ajax y jQuery

Frecuentemente a la hora de programar necesitamos refrescar y cargar contenido en una capa y que  ejecute un fichero cada x segundos. Esta práctica es muy útil en chats, blogs, e-commerce, cms, etc …  El siguiente ejemplo actualiza el contenido de una capa cada 10 segundos y carga en ella el contenido del fichero que le indiquemos. El efecto de fundido usando fadeOut fadeIn es para darle más dinamismo al script.

<script>
function actualizar(){
   $('#capa').fadeOut("slow").load('fichero.php').fadeIn("slow");
}
setInterval( "actualizar()", 10000 );
</script>

<div id="capa"></div>

click aquí para ver una pequeña demostración.

Tenéis más documentación de los métodos y funciones usados en el ejemplo a continuación. Haz click en los enlaces para obtener más información:

  • .load() es el método de JQuery usado para cargar los datos desde servidor y la cual nos retornará los resultados en formato HTML.
  • fadeOut() es un método de jQuery para ocultar elementos usando transparencias.
  • fadeIn() es un método de jQuery para mostrar elementos usando transparencias.
  • setInterval es una función JavaScript que nos permitirá ejecutar una función cada X segundos que le indiquemos.

, , , , , ,

No hay Comentarios