Ejecutar una función cada x segundos con jQuery
Modificar el contenido por intervalos de tiempo (setInterval) puede ser una función importante para según que tipo de páginas Webs como por ejemplo para mostrar un reloj, o cualquier información que pueda cambiar en cuestión de segundos y no sea necesario recargar la página para refrescar los cambios.
JavaScript dispone en su librería de funciones la función setInterval() que permite justamente ejecutar una función o evaluar una expresión a intervalos específicos (en mili-segundos).
El método setInterval() se ejecutará en bucle hasta que se llame a la función clearInterval() o se cierre la ventana del navegador. La función setTimeout() puede resultar interesante también.
En este artículo vamos a ver 2 ejemplos de como ejecutar una función cada x segundos con jQuery. En el primer ejemplo, veremos como cambiar el color de fondo de una página y el color del texto cada 3 segundos y, en el segundo veremos como ejecutar un archivo PHP mediante la técnica AJAX.
Cambiar el color de fondo y el color del texto de una página Web cada 3 segundos
En el ejemplo vamos a tener el siguiente código HTML:
Fíjate que el tab <body> tiene un class=»white» y el tag <h1> tiene un class=»black».
Como su nombre indican tendremos en nuestra hoja de estilos 2 clases representando el color negro y blanco:
.white {
background-color:#FFFFFF;
color:#000000;
}
.black {
background-color:#000000;
color:#FFFFFF;
}Y en la cabecera de la página o dentro de la etiqueta <head> de la página agregamos el código JavaScript que realiza la acción:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function changeColor() {
if ($('body').hasClass('white')) {
$('body').removeClass('white');
$('body').addClass('black');
$('h1').removeClass('black');
$('h1').addClass('white');
}
else {
$('body').removeClass('black');
$('body').addClass('white');
$('h1').removeClass('white');
$('h1').addClass('black');
}
}
setInterval(changeColor, 3000);
});
</script>La función principal o clave del asunto es la llamada a la función setInterval() a la que le estamos pasando 2 parámetros; la función a ejecutar y el tiempo de espera en mili-segundos para volver a ejecutar.
En la función changeColor() que hemos creado lo único que hacemos es quitar y añadir los estilos correspondientes en el lugar deseado. En este caso, el color de fondo irá cambiando de color blanco a negro cada 3 segundos.
Ver ejemplo cambiar de color cada 3 segundos
Se podrían hacer todo tipo de funciones para ejecutar con la función setInterval().
También es posible ejecutar un archivo PHP cada x segundos empleando la tecnología AJAX.
Mostrar un número aleatorio entre 0 y 100 cada 3 segundos empleando la tecnología AJAX
Añadiremos en el <body> un contenedor donde arrojaremos los resultados:
<span id="value">0</span>
En la cabecera de la página o dentro de la etiqueta <head> agregamos el código JavaScript que realiza la acción:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
function changeNumber() {
value = $('#value').text();
$.ajax({
type: "POST",
url: "add.php",
success: function(data) {
$('#value').text(data);
}
});
}
setInterval(changeNumber, 3000);
});
</script>Hemos creado la función changeNumber() que lo que hace es ejecutar un AJAX que ejecuta el archivo add.php cada 3 segundos retornando un valor aleatorio entre 0 y 100.
El archivo add.php contiene tan solo:
<?php
echo rand(0,100);
?>El ejemplo es muy sencillo pero ya nos da luz para realizar otro tipo de operaciones como guardar un valor en la base de datos, actualizar registros cada x segundos, escribir en un archivo, enviar un email, etc.
Esta entrada ha sido actualizada el 25/10/2018
Autor
¿Buscas trabajo de programador?
17 respuestas a “Ejecutar una función cada x segundos con jQuery”
Deja una respuesta
11 artículos que te podrían interesar
Ver más sobre
Muchas gracias Jose
me has salvado la vida, muchas gracias
Como puedo cancelar? Es decir, cuando alguien le de un click en algun lado en especifico que el contador vuelva a empezar desde 0.
Muchas gracias!! Funciona genial
Gracias me sirvio de gran ayuda para un plugin … saludos desde hace años sigo tu pagina realmente va directo al grano y con demo like men
Gracias brother me ayudo tu ejercicio, me estaba matando con el setInterval pero ya vi como lo hiciste y me funciono
Excelente aporte amigo. Podrías compartir el archivo add.php?
Hola,
El archivo add.php tan solo tiene 3 lineas de código y están detalladas en el post.
Saludos
Tengo dos códigos jquery, que son diferentes. Uno es para un banner de imágenes que pasan en línea y el otro es para abrir una galería.
Resulta que los dos códigos interfieren el uno con el otro, he colocado la variable: var j = jQuery.noConflict(); en el código de la galería, pero el otro no me funciona. Estos son los dos códigos:
Galería:
var j = jQuery.noConflict();
jQuery(function() {
jQuery(‘#gallery a’).lightBox();
});
Banner
$(window).load(function() {
$(‘#slider’).nivoSlider();
});
¿Cómo hago para que los dos códigos me funcionen? Gracias.
Hola quiero que las imágenes de un banner hecho en jquery pasen más lentas entre una y otra. El código jquery que tengo es este:
$(window).load(function() {
$(‘#slider’).nivoSlider();
});
¿Puedo agregarle alguna variable para que las imágenes me pasen más lentas?
Gracias
Hola,
Tendrás que buscar las opciones que tiene el plugin nivoSlider. Es un plugin que tiene un recorrido y que seguramente tiene un montón de opciones. Solo tienes que averiguar como. Saludos
hola
Hola, si lo hice yo asi, solo que utilizo dos setInterval(), uno actualiza usuarios online y el otro actualiza un chat, el problemas es que se cuelga en ocaciones
setInterval(function(){
chat();//notificaciones
onlineempl();//numero de empleados online
},6000);
es posible esto? o cree que por eso se cuelgue la pagina?? gracias 🙂
muy bien
Me ayudo mucho, es el pie para poder hacer una aplicacion de Chat.
Claro habra que trabajar mucho mas pero asi es como se comenzaria. Muy buen post.
Necesito esto pero para recargar un Javascript cada 3 min. ¿Puedes ayudarme por favor?
Lo unico que deberias de hacer es incrementar el valor del time que tiene en la funcion de setInterval.