Una sinfonía en C#

Un pequeño aporte a la comunidad de habla hispana.

Tips de Javascript: para qué sirve setTimeout = 0?

Tal vez hayan visto este código:

setTimeout(function(){
 //hacer ago
}, 0);

Básicamente es un timeout (es decir, esperar un tiempo y llamar al callback) con el tiempo en 0. Uno pensaría que esto se debe ejecutar inmediatamente, pero no es así, de hecho, el tiempo que puede tardar en teoría podría ser infinito, veámos un ejemplo:

console.log( +new Date );
	
setTimeout(function(){
	console.log( + new Date );	
		console.log("timeout");
}, 0);

image

Este pequeño código escribe los milisegundos y nos permite ver cuánto tardó la ejecución.

Digamos que es casi inmediato, en este caso tardó unos 21 ms en ejecutarse. Veamos el siguiente ejemplo.

console.log( +new Date );

setTimeout(function(){
	console.log( + new Date );	
	console.log("timeout");
}, 0);


for(var i = 0; i< 1000; i++){
	console.log("");
}

image

Esta vez agregamos un loop después del setTimeout y ahora tardó casi 200ms, si miramos con atención vemos que en realidad el código del callback se ejecutó recién después de que terminó de ejecutarse el loop, nada hace pensar que esto debería pasar, un pensaría que el tiempo debería ser similar al anterior y encontrarnos con el mensaje en medio de la ejecución del loop, pero no es así.

El call stack de Javascript

Javascript es single thread, es decir, hace una única cosa a la vez, lo que hace es poner las tareas en una pila de llamadas (el famoso stack overflow ocurre cuando sobrepasamos su límite) y las va ejecutando de a una.

En el caso de los timer (y otras cosas), lo que ocurre es que se colocan en el call stack (1) y luego se llama a las funciones especiales conocida como Web Apis (2) (son funciones especiales del navegador, en este caso cuentan el tiempo).

Luego que el intervalo se cumplió se colocan en el call queue indefinidamente (3) hasta que el call stack se encuentre vacío, entonces se pasa la función callback (en nuestro caso console.log(-new Date) ) al call stack y se ejecuta (4).

image

En nuestro ejemplo Javascript puso primero en el call stack nuestro setTimeout y detectó la llamada a funciones de Web Apis, luego de transcurrido el tiempo (0 ms) puso el callback en call queue; cuando el call stack quedó vacío (terminó de ejecutarse el bucle for) lo puso en call stack y lo ejecutó.

Es decir que: usar setTimeout con el interval en 0 es equivalente a decir “ejecutá esto cuando no haya nada más por ejecutar” y eso puede ser ya, o dentro de un tiempo mayor.

Nos leemos.

Loading