La función setInterval().

En categoría: Manual de JavaScript

En este artículo repasaremos la estructura y uso de la función setInterval() de JavaScript.

Esta función es un método del objeto window.

Estructura de setInterval():

var identificador = setInterval("expresión-javascript",milisegundos)

Esta función crea un temporizador que dispara un reloj con los milisegundos que indicamos en el segundo parámetro de la función. Al cumplirse el tiempo indicado se ejecuta el código del primer parámetro, expresión-javascript que va siempre entre comillas dobles o simples.

El código del primer parámetro se ejecuta cada vez que se cumple el tiempo indicado en el segundo parámetro. La función devuelve un número identificador que podemos guardarlo en una variable para su posterior utilización, por ejemplo, mediante clearInterval() podemos detener el temporizador creado con setInterval().

Primer parámetro: "expresión-javascript" - Puede ser cualquier código válido del lenguaje, podemos llamar funciones y/o almacenar datos en variables, incrementar valores, etc.

Segundo parámetro: milisegundos - Es el tiempo definido para ejecutar el primer parámetro. Debemos expresarlo en milisegundos por lo que, cada 1 segundo, indicaremos 1000 milisegundos. Este valor podemos almacenarlo anteriormente en una variable.

Información relativa al artículo

Probar el ejemplo

Temas relacionados a este Artículo

Ejemplo de la función setInterval() de JavaScript:

<HTML>
<HEAD>

<STYLE type="text/css">
#slideMenuCSS, #slideMenuCSS2 {
position:absolute;
left:-130px;
width:150px;
top:170px;
border:1.5px solid #006633;
background-color:#FFFFCC;
background-image:url(flechair.gif);
background-position:right;
background-repeat:no-repeat;
layer-background-color:#FFFFCC;
font:bold 12px Verdana;
line-height:20px;
padding-left:10px;
padding-right:5px;
}
</STYLE>

</HEAD>

<BODY>

<script language="JavaScript">

if (document.all) {
	document.write('<div id="slideMenuCSS2" '+
	'style="left:-130px; " onMouseover="pull()" onMouseout="draw()">');
}

</script>

<LAYER id="slideMenuCSS" onMouseover="pull()" onMouseout="draw()">

<script language="javascript">
var menuTexto=new Array()
var menuEnlaces=new Array()

menuTexto[0]="Home"
menuTexto[1]="Categorías"
menuTexto[2]="Mapa"
menuTexto[3]="Contacto"

menuEnlaces[0]="http://www.codigojavascript.com"
menuEnlaces[1]="http://www.codigojavascript.com/script-categorias.php"
menuEnlaces[2]="http://www.codigojavascript.com/mapa-del-sitio.php"
menuEnlaces[3]="http://www.codigojavascript.com/contacto/colabora/colabora.php"

for (i=0;i<=menuTexto.length-1;i++) {
	document.write('<a href='+menuEnlaces[i]+
	'>'+menuTexto[i]+'</a><br>')
}

</script>

</LAYER>

<script language="javascript">

function regenerate(){
	window.location.reload()
}

function regenerate2(){
	if (document.layers) {
	setTimeout("window.onresize=regenerate",400);
	}
}

window.onload=regenerate2

if (document.all) {
	document.write('</div>')
	menuCSS=document.all.slideMenuCSS2.style
	rightboundary=0
	leftboundary=-130
}

else {
	menuCSS=document.layers.slideMenuCSS
	rightboundary=130
	leftboundary=10
}

function pull() {
	if (window.drawit)
	clearInterval(drawit)
	/* Utilizamos la función setInterval() para ejecutar una función llamada
	pullengine(). Esta función se ejecutará cada 50 milisegundos.
	También guardamos en una variable llamada pullit el número identificador
	que podremos utilizar más adelante para detener el temporizador creado por setInterval() */
	pullit=setInterval("pullengine()",50)
}

function draw(){
	clearInterval(pullit)
	/* Esta función realiza la misma operación que la anterior, 
	ejecutando, esta vez, una función llamada drawengine(). */
	drawit=setInterval("drawengine()",50)
}
function pullengine(){
	if (document.all&&menuCSS.pixelLeft<rightboundary) {
		menuCSS.pixelLeft+=5 }
	else if(document.layers&&menuCSS.left<rightboundary) {
		menuCSS.left+=5 }
	else if (window.pullit) {
		clearInterval(pullit) }
}

function drawengine() {
	if (document.all&&menuCSS.pixelLeft>leftboundary) {
		menuCSS.pixelLeft-=5 }
	else if(document.layers&&menuCSS.left>leftboundary) {
		menuCSS.left-=5 }
	else if (window.drawit) {
		clearInterval(drawit) }
}

</script>

</BODY>
</HTML>

	Temas relacionados a este artículo:
	La función setInterval() La función setTimeout() La función alert() (Cuadro de alerta) La función confirm() (Cuadro de confirmación) La función prompt() (Cuadro de diálogo)
	Ejemplos que utilizan la función setInterval() de JavaScript:
	Banner con imágenes efecto slidein Banner de Texto Siempre Visible Reloj Hora Minuto Segundo en tabla Menú simple en CSS con enlaces y descripción

Comentarios Recibidos sobre: La función setInterval de JavaScript

Todavía nadie comentó este artículo.
Para insertar un comentario hacé clic en "Comentar artículo"

Comentar Artículo

Agradecemos todos los comentarios. Gracias por ayudarnos a mejorar el sitio.
Importante: Los comentarios están para ampliar el artículo propuesto en esta página, proponer o responder alguna consulta de otro visitante. En ningún caso nos hacemos responsables del contenido publicado en los comentarios. En el caso que formules una pregunta y ésta no sea respondida, puedes solicitarnos ayuda desde el formulario de ayuda aunque no te aseguramos una respuesta inmediata.