Estoy aprendiendo JavaScript y voy por la parte de cómo funciona el Event Loop, y los callbacks, y probando a ver si entendía todo este tema del asincronismo en JavaScript y que es un lenguaje no bloqueante, y me encontré que dicen que para que un callback devuelva su resultado, la pila de llamadas (el call stack) debe estar vacía, porque JavaScript es un lenguaje no bloqueante, e intenté probar con este código que hice:
function setTimeoutUno() {
console.log("Set Timeout de la funcion uno");
}
function setTimeoutDos() {
console.log("Set Timeout de la funcion dos");
}
function setTimeoutTres() {
console.log("Set Timeout de la funcion tres");
}
function uno() {
console.log("Funcion uno ejecutandose");
setTimeout(setTimeoutUno, 0);
console.log("Saliendo de la función uno");
}
function dos() {
console.log("Funcion dos ejecutandose");
setTimeout(setTimeoutDos, 0);
console.log("Llamando a funcion tres");
tres();
console.log("Saliendo de la funcion dos");
}
function tres() {
console.log("Funcion tres ejecutandose");
setTimeout(setTimeoutTres, 0);
console.log("Saliendo de la funcion tres");
}
uno();
dos();
tres();
Chequeé en la página de latentflip cómo funcionaba el tema del asincronismo de mi código, y veo que hay partes en las que el call stack está vacío pero el event loop no devuelve los callbacks, sino que los devuelve al finalizar todo el código aun cuando los intervalos de tiempo en los setTimeout
son de 0ms. Entonces me parece que eso de que para que el event loop devuelva el resultado de una callback debe esperar a que el call stack esté vacío no es tan verdadero así que digamos. Lo que me lleva a mi pregunta: ¿mi conclusión es errónea, y mi código no refleja la realidad de cómo funciona el event loop de JavaScript? ¿o el event loop regresa los resultados de los callbacks al finalizar todo el código?
Edición
Lo que pasa es que según la simulación en la página de latentflip (para ver el comportamiento de mi código) hay partes en las que el call stack está vacío, las tareas de los callbacks ya están completadas, sin embargo no retorna el resultado, sino que prosigue a la siguiente linea de código, y es al final de todo el código, que el event loop devuelve el resultado, lo que me hace pensar que el call stack nunca estará vacío sino hasta llegar al final del código. Si te fijas, la función uno de mi código tiene un setTimeout
, que envía la callback a la API web para que se ejecute en segundo plano, pero cuando finaliza la función uno, y sale del call stack, se puede observar en la simulación que la pila está ahora vacía, sin embargo, el event loop no retorna el resultado de la callback. En el código que colgué, existen creo que dos casos en la que el call stack está vacío, que sería al finalizar la función uno y la función dos, pero el event loop no devuelve las llamadas, sino hasta que llega al final del todo el código, que es después de la llamada a la función tres, que me hace pensar que entonces el call stack no estará vacío hasta que finalice todo el código. Entonces al observar esto, me parece extraño porque hay más de una situación en la que el call stack está vacío, pero el event loop no devuelve las callbacks, y la teoría es que, si el callback está vacío, entonces el event loop devuelve los resultados de las callbacks.