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.