Así que entiendo el bucle de eventos JS, pero todavía tengo algunas preguntas. Aquí está mi escenario y algunas preguntas.
Así que digamos que tengo estas funciones:
La forma en que entiendo esto, y corríjame si me equivoco, lo que sucedería es que la función1, la función2 y la función3 se agregarían a la cola. Luego, la función 1 se agregaría a la pila de llamadas seguida de las siguientes dos funciones.
Ahora, la parte en la que estoy confundido es porque la primera función tomará mucho tiempo, ¿qué sucede con ella? ¿Se empuja a otro lugar para que se ejecuten las siguientes dos funciones? Creo que la respuesta a esto es que la única forma en que se empuja a otro lugar para que pueda continuar ejecutándose es convertirlo en una función asíncrona. Y la forma en que lo convierte en una función asíncrona es mediante el uso de una función de devolución de llamada o promesas. Si este es el caso, ¿cómo sabe que se trata de una función asíncrona? ¿Y a dónde se empuja para que las otras dos funciones se puedan ejecutar ya que son relativamente simples?
Creo que respondí la pregunta yo mismo, pero sigo confundiéndome, así que si alguien pudiera explicarlo en términos extremadamente simples, sería genial y lo siento por la pregunta extremadamente estúpida.
Las llamadas a funciones ordinarias no se envían a la cola de eventos, simplemente se ejecutan sincrónicamente.
Ciertas funciones integradas inician operaciones asincrónicas. Por ejemplo, setTimeout() crea un temporizador que ejecutará la función de forma asincrónica en el futuro. fetch() inicia una solicitud AJAX y devuelve una promesa que se resolverá cuando se reciba la respuesta. addEventListener() crea un oyente que llamará a la función cuando ocurra el evento especificado en un elemento.
En todos estos casos, lo que efectivamente sucede es que la función de devolución de llamada se agrega a la cola de eventos cuando se alcanza la condición correspondiente.
Cuando se llama a una de estas funciones, se ejecuta hasta su finalización. Cuando la función regresa, el bucle de eventos extrae el siguiente elemento de la cola de eventos y ejecuta su devolución de llamada, y así sucesivamente.
Si la cola de eventos está vacía, el bucle de eventos permanece inactivo hasta que se agrega algo. Entonces, cuando recién comienza en una página web simple, es posible que no suceda nada hasta que haga clic en algo que tenga un detector de eventos, luego se ejecutará su función de detector.
En aplicaciones interactivas como páginas web, tratamos de evitar escribir funciones que toman mucho tiempo para ejecutarse, porque bloquea la interfaz de usuario (otras acciones asíncronas no pueden interrumpirla). Entonces, si va a leer un archivo grande, use una API que lo lea de forma incremental, llamando a un detector de eventos para cada bloque. Eso permitirá que otras funciones se ejecuten entre el procesamiento de cada bloque.
No hay nada específico que identifique las funciones asíncronas, es solo parte de la definición de cada función. No puede decir que cualquier función que tenga un argumento de devolución de llamada sea asíncrona, porque funciones como Array.forEach() son síncronas. Y las promesas no hacen que algo sea asíncrono: puede crear una promesa que se resuelva sincrónicamente, aunque generalmente no tiene sentido (pero puede hacer esto como un código auxiliar cuando la persona que llama espera una promesa en el caso general). La palabra clave async antes de una definición de función simplemente envuelve su valor de retorno en una promesa, en realidad no hace que se ejecute de forma asíncrona.