3

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.

1
  • Acabo de editar la respuesta basándome en tus últimos comentarios, espero que sea de ayuda, saludos.
    – g.4
    el 2 ago. 2021 a las 3:08

1 respuesta 1

3

Edición

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.

En efecto, el call stack no esta vacío hasta llegar al final del programa. Como mencioné en la respuesta original, el event loop solo regresa lo que hay en listas de tareas hasta que el call stack este vacío.

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.

Cuando finaliza la función uno, esta sale del call stack, mas aún no se termina el programa completo, el call stack aún no esta vacío, lo mismo para las otras dos invocaciones. Como se menciono en la respuesta original, si el call stack no esta vacío el event loop no permite el retorno de las listas de tareas.

@Jesus Dias por lo que mencionas en:

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

Puede que tus dudas sean acerca de como se ejecutan las funciones JS en el call stack. Pero eso ya es otra pregunta; puedes subirla a la comunidad, es un tema muy intersante también.

Respuesta original

¿o el event loop regresa los resultados de los callbacks al finalizar todo el código?

Si, el event loop regresa las funciones en las diferentes listas de tareas hasta que ya no hay nada en el call stack del JS engine.


Contexto Browser

JS Engine solo hace una cosa a la vez, pero el Browser con el que interactua esta haciendo más cosas detrás de cámaras.

Cuando el timer de setTimeout expira, las funciones callback de setTimeout se van a la lista de tareas y esperan a ser ejecutadas.

El event loop es un mecanismo que ofrece el browser, este mecanismo esta revisando constantemente si el call stack de JS engine esta vacío; cuando lo está, entonces agenda la ejecución de las listas de tareas.


En el ejemplo del OP se puede observar esta secuencia:

  1. Lo que hay en el call stack es un programa con 3 llamadas a funciones.

  2. Cada función registra otras funciones callback con un Timer de 0s, por medio de la API Browser setTimeout.

  3. Se termina la ejecución del programa principal, ya esta vacío el call stack de JS Engine.

  4. El Event loop permite que se ejecuten las funciones que están en la lista de tareas, las cuales son las funciones callback registradas con setTimeout.

No importa que se configure el timer a 0, el Event loop siempre esperará a que el call stack este vacío para ejecutar lo que hay en las listas de tareas.

Espero que esta respuesta sea de ayuda.

2
  • Ehm, creo que quizás no me expliqué bien en mi planteamiento. Chequea mi comentario abajo a ver qué te parece
    – Jesus Diaz
    el 2 ago. 2021 a las 2:37
  • Sí, perdona, ya edité la pregunta
    – Jesus Diaz
    el 2 ago. 2021 a las 2:44

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.