Scriptia. Javascript y buenas prácticas en español

Intervalos e iteradores infinitos

Saltar a Anotaciones relacionadas

Hoy vamos a parir un par de iteradores un poco raritos. El primero de ellos infinito. El segundo, aleatorio. Y luego los combinaremos con `setInterval`. Porque tú lo vales y porque nos serán útiles para presentar información periódicamente.

El objetivo del script es mostrar en un par de casillas de la barra lateral de un sitio, información sobre cursos cada N segundos.

Trabajaremos a partir de un par de arrays (ambos propiedades de un mismo objeto):

var cursos = {

	artesania : [
		"<h2>Encaje de bolillos</h2><p>Te regalamos los palitroques.</p>",
		"<h2>Punto de cruz</h2><p>Los palitroques los pones tú</p>",
		"<h2>Ganchillo</h2><p>Aprenderás a hacer sombreritos para el papel higiénico.</p>",
		...
	], 

	musica : [
		"<h2>Gaita</h2><p>Placer para tus vecinos.</p>",
		"<h2>Guitarra</h2><p>Empezaremos por Kumbaya y seguiremos con Soldadito de Bolivia</p>",
		"<h2>Acordeón</h2><p>Mejor usa uno chiquito, los grandes pesan mucho.</p>",
		"<h2>Violín</h2><p>Deberías haber aprendido de pequeño. Si empiezas ahora, tu matrimonio quebrará.</p>",
		...
	] 

};

Y un documento HTML que incluirá sendos `div` con identificadores correspondientes a las categorías de cursos:

...
<div id="artesania"></div>
<div id="musica"></div>
...

## Iterador infinito

Queremos recorrer, hasta el infinito y más allá, el contenido de cada uno de los arrays. He aquí una funcioncita que, dado un array, nos devolverá uno de sus elementos. _El siguiente_ elemento. (Si todavía no hemos pedido ninguno o ya los hemos agotado, _el siguiente_ será el primero.

function getNextOrFirst(a) {
	if (a._current === undefined || a._current >= a.length)
		a._current = 0;
	return a[a._current++];
}

Apunte: en ECMAScript, un `Array` no es sino un objeto especializado, así que le podemos _enchufar_ propiedades según nos venga en gana. Esto nos permite usar `a._current` para llevar la cuenta del último elemento devuelto por la función.

## El intervalo

`setInterval` que, ojo al dato, es un método de `window` y **no pertenece al estándar ECMAScript** sino a las implementaciones de los navegadores (JavaScript, JScript, etc.) crea un temporizador que ejecuta la función fn cada N milisegundos:

// un alert con "argo" cada 5 segundos
function diArgo() {
	alert("argo");
}
setInterval(diArgo, 5000);

Si por alguna razón deseamos cancelar el temporizador, debemos asignar el valor de retorno de `setInterval` a una variable. Luego usaremos `clearInterval` para detener el temporizador:

// nos preguntará si estamos hartos
// cada 5 segundos
// hasta que realmente lo estemos
function preguntaSiEstoyHarto() {
	if (!confirm("¿Ya estás harto?")) {
		clearInterval(i);
	}
}
var i = setInterval(preguntaSiEstoyHarto, 5000);

Un detallito: un temporizador detenido por `clearInterval` evalúa a `true` cuando lo usamos en una condición. Para destruir sin piedad el intervalo, necesitaremos una línea más:

var i = setInterval(funcionDeMarras, 5000);
// para detener y destruir el temporizador
clearInterval(i);
i = null;

(Si pretendes ejecutar una función una sola vez transcurridos N milisegundos, puedes usar `setTimeout` y `clearTimeout`, primos hermanos de los métodos supradescritos.)

## Todo juntito

// las variables que veíamos más arriba
var cursos = { artesania : [ ... ], musica : [ ... ]};

var b = 0;
function muestraCurso() {
	b = ++b % 2; // otra forma rara de alternar entre 0 y 1
	var k = b ? "artesania" : "musica";
	document.getElementById(k).innerHTML = getNextOrFirst(cursos[k]);
}

// la función que iniciará todo
function init() {
	muestraCurso(); // mostramos los dos cursos
	muestraCurso(); // para empezar bien el año
	// creamos el temporizador
	var i = setInterval(muestraCurso, 2000);
}

// y la asignación de `init` a window.onload
window.onload = init;

Y esta vez, tenemos una demo.

## Un ítem aleatorio

`getRandomItem` nos devolverá un elemento del array escogido aleatoriamente:

function getRandomItem(a) {
	// nótese que redondeamos hacia abajo
	return a[Math.floor(Math.random() * a.length)];
}

Esta función nos servirá para crear «cosas» súmamente útiles como, por ejemplo, este generador de discursos.