Actualizo (08:00):
El sistema usado en el ejemplo que croczilla.com publica, está desarrollado usando Stratified Javascript (SJS), una implemenetación de Javascript con Javascript O.o. Se trata de una librería multinavegador que nos permite añadir concurrencia a Javascript fácilmente.
La clave está en el uso de tags <script /> de un tipo diferente al que conocemos como text/javascript, usando uno propio se encarga de evaluar el código contenido en él añadiendo una serie de funcionalidades como hold(),resume(), suspend() y la posibilidad de usar concurrencia en Javascript.
Ejemplo
<script type="text/javascript" src="sjs-loader.js"></script>
<script type="text/sjs">
….
function animate(elemname, duration_ms, step_ms) {
var elem = document.getElementById(elemname);
var start_time = new Date();
var x = 0;
do {
elem.style.left = x;
x = (x + 10) % 200;
hold(step_ms); // Parando la ejecución
} while (duration_ms > new Date() - start_time);
}
function par(a, b) {
alert("all done");
}
// Procesos paralelos
par(animate("animated_element_1", 10000, 100),
animate("animated_element_2", 7000, 80));
…
</script>Como podemos ver, en esta porción de código sacada de una demo de crockzilla.com, usamos hold() para detender la ejecución y usamos el paso de parámetros para comenzar la concurrencia de procesos.
Con los Web Workers a la vuelta de la esquina, estas técnicas nos puedes empezar a mostrar el camino a seguir en unos meses (años). Por el momento, recomendaría usarla con precaución ya que no debemos olvidar que la librería basa su funcionamiento en la evaluación del código, con el coste que esta operación conlleva.
La presentación por parte de Apple de la «multitarea» en la próxima versión de iPhone OS 4, me ha hecho recordar un artículo que tenía por ahí perdido en el que nos mostraba un ingenioso sistema de multitarea «real» con Javascript. El enlace es algo antiguo pero realmente interesante.
He montado un ejemplo para verlo funcionando.
Código
// Tareas a realizar
function task1(){....}
function task2(){....}
function task3(){....}
// Función void
function multitask() { /* ignore args */ }
// Llamada
multitask(task1(), task2(), task3());Básicamente el código se compone de una serie de tareas (task(x)) que se ejecutarán a la vez, y que llamaremos como si de parámetros se trataran a la función multitask().
La función multitask() es una función vacia que no realiza nada y nos permite ejecutar el código de todas las tareas en paralelo que queramos ejecutar. He hecho una prueba con 200 tareas y ha funcionado sin problemas 😀
Actualizo (12:12):
epplestun me recuerda un interesante artículo que escribió hace unos días sobre Web Workers de HTML5. Totalmente recomendable si te interesa este tema. También tenemos un artículo de John Resig sobre el tema que vimos hace un tiempo.
Actualizo (13:13):
Fallo mio, por no leer más detenidamente. El ejemplo que he montado, y que he explicado, funciona por que me baso en setTimeouts() y simula esa reacción. Pero en NINGÚN CASO se puede llamar multitarea a esto. Se trata de una implementación SJS que Venkman explica perfectamente en un comentario.
Siento todas las molestias, ilusiones y problemas causados… me emocioné y me salté ese imprescindible detalle :(.
13 comentarios, 1 referencias
+
#