Introducción a JavaScript Asíncrono
¿Qué es la programación asíncrona?
La programación asíncrona permite que el código ejecute operaciones sin bloqueo. En contraste con la programación síncrona—donde cada operación espera a que la anterior finalice antes de continuar—la programación asíncrona permite que otras tareas avancen sin esperar a que termine una tarea previa.
Esto es fundamental en el desarrollo web, donde es necesario realizar tareas que requieren tiempo, como obtener datos de una API, esperar la entrada del usuario o configurar temporizadores.
Imaginemos que estamos desarrollando un programa donde 1 y 2 son solicitudes al servidor, y 3, 4 y 5 son otras operaciones como gestionar interacciones del usuario.
En el modelo síncrono, las tareas 1 y 2 bloquean la ejecución de 3, 4 y 5 hasta que finalizan. Por ejemplo, si un usuario publica un comentario (1) y luego intenta abrir una barra lateral (3), la interfaz se congelará hasta que se procese el comentario, generando demoras.
En el modelo asíncrono, las solicitudes al servidor (1 y 2) no bloquean el programa. Mientras espera una respuesta, el programa continúa con otras tareas (3, 4 y 5). Esto permite que el usuario interactúe con la barra lateral inmediatamente después de publicar el comentario, mejorando la capacidad de respuesta.
Diferencias entre el comportamiento síncrono y asíncrono
Programación síncrona
En la programación síncrona, las tareas se ejecutan una tras otra. Cada tarea debe completarse antes de que la siguiente comience. Si una tarea toma mucho tiempo (por ejemplo, la carga de un archivo grande), bloquea todas las tareas posteriores, lo que puede hacer que la aplicación no responda.
123console.log('Task 1: Start'); for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task console.log('Task 2: After long task');
En este ejemplo, la Tarea 2 solo se ejecutará después de que la tarea de larga duración (el bucle) haya finalizado. Esto bloquea la ejecución del código y puede congelar el navegador.
Programación asíncrona
En la programación asíncrona, las tareas pueden iniciarse y luego ejecutarse más tarde sin bloquear el resto del código. Esto permite que otras tareas continúen mientras se espera que finalicen operaciones de larga duración (por ejemplo, la obtención de datos). Garantiza que tareas como solicitudes de red o temporizadores no detengan el flujo de otras operaciones de la aplicación.
index.html
index.css
index.js
En este ejemplo, la Tarea 1 se ejecuta de inmediato, la Tarea 3 también se ejecuta de inmediato y la Tarea 2 se ejecuta después de 2 segundos. El comportamiento asíncrono permite que el programa continúe sin esperar a que la Tarea 2 finalice.
Ejemplos del mundo real de operaciones asíncronas
Obtención de datos desde una API
Una de las operaciones asíncronas más comunes en JavaScript es la obtención de datos desde un servidor remoto utilizando APIs. JavaScript solicita datos a una API, pero el resto del código continúa ejecutándose en lugar de esperar la respuesta del servidor. Una vez que los datos están disponibles, se procesan utilizando un callback o una promesa.
index.html
index.js
- Código sincrónico: El párrafo con
id="syncMessage"demuestra que el código sincrónico se ejecuta inmediatamente después de iniciar la obtención asíncrona. Indica que el programa no se detiene mientras espera los datos de la API; - Obtención asíncrona: Una vez que se obtienen los datos, el párrafo con
id="apiOutput"se actualiza, mostrando la finalización de la tarea asíncrona.
Temporizadores (setTimeout y setInterval)
setTimeout() y setInterval() de JavaScript se utilizan comúnmente para programar tareas que se ejecutan después de un retraso o en intervalos regulares. Estas funciones no bloquean la ejecución de otro código. Las tareas que activan ocurren después de un retraso o intervalo especificado mientras el resto del código continúa ejecutándose.
index.html
index.js
- Código síncrono: El párrafo con
id="syncMessage"se actualiza de inmediato, mostrando que la parte síncrona del código se ejecuta sin esperar al temporizador; - Temporizador asíncrono: Después de 3 segundos, la función de retorno de
setTimeout()se completa y actualiza el párrafo conid="timerOutput"para indicar que el temporizador ha finalizado.
Manejo de eventos de entrada del usuario
JavaScript espera de forma asíncrona a que ocurran eventos sin bloquear el resto del código al tratar con interacciones del usuario (como clics, envíos de formularios o pulsaciones de teclas). Los escuchadores de eventos son no bloqueantes, lo que significa que el resto del programa puede continuar ejecutándose mientras espera la entrada del usuario.
index.html
index.js
- Código sincrónico: El párrafo con
id="syncMessage"muestra que el código sincrónico se ejecuta inmediatamente después de configurar el escuchador de eventos. No espera a que el usuario haga clic en el botón; - Manejo asíncrono de eventos: El escuchador de eventos del botón se activa cuando el usuario hace clic, actualizando el párrafo con
id="eventOutput".
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 2.22Introducción a JavaScript Asíncrono
Desliza para mostrar el menú
¿Qué es la programación asíncrona?
La programación asíncrona permite que el código ejecute operaciones sin bloqueo. En contraste con la programación síncrona—donde cada operación espera a que la anterior finalice antes de continuar—la programación asíncrona permite que otras tareas avancen sin esperar a que termine una tarea previa.
Esto es fundamental en el desarrollo web, donde es necesario realizar tareas que requieren tiempo, como obtener datos de una API, esperar la entrada del usuario o configurar temporizadores.
Imaginemos que estamos desarrollando un programa donde 1 y 2 son solicitudes al servidor, y 3, 4 y 5 son otras operaciones como gestionar interacciones del usuario.
En el modelo síncrono, las tareas 1 y 2 bloquean la ejecución de 3, 4 y 5 hasta que finalizan. Por ejemplo, si un usuario publica un comentario (1) y luego intenta abrir una barra lateral (3), la interfaz se congelará hasta que se procese el comentario, generando demoras.
En el modelo asíncrono, las solicitudes al servidor (1 y 2) no bloquean el programa. Mientras espera una respuesta, el programa continúa con otras tareas (3, 4 y 5). Esto permite que el usuario interactúe con la barra lateral inmediatamente después de publicar el comentario, mejorando la capacidad de respuesta.
Diferencias entre el comportamiento síncrono y asíncrono
Programación síncrona
En la programación síncrona, las tareas se ejecutan una tras otra. Cada tarea debe completarse antes de que la siguiente comience. Si una tarea toma mucho tiempo (por ejemplo, la carga de un archivo grande), bloquea todas las tareas posteriores, lo que puede hacer que la aplicación no responda.
123console.log('Task 1: Start'); for (let i = 0; i < 1000000000; i += 1) {} // Simulate a long-running task console.log('Task 2: After long task');
En este ejemplo, la Tarea 2 solo se ejecutará después de que la tarea de larga duración (el bucle) haya finalizado. Esto bloquea la ejecución del código y puede congelar el navegador.
Programación asíncrona
En la programación asíncrona, las tareas pueden iniciarse y luego ejecutarse más tarde sin bloquear el resto del código. Esto permite que otras tareas continúen mientras se espera que finalicen operaciones de larga duración (por ejemplo, la obtención de datos). Garantiza que tareas como solicitudes de red o temporizadores no detengan el flujo de otras operaciones de la aplicación.
index.html
index.css
index.js
En este ejemplo, la Tarea 1 se ejecuta de inmediato, la Tarea 3 también se ejecuta de inmediato y la Tarea 2 se ejecuta después de 2 segundos. El comportamiento asíncrono permite que el programa continúe sin esperar a que la Tarea 2 finalice.
Ejemplos del mundo real de operaciones asíncronas
Obtención de datos desde una API
Una de las operaciones asíncronas más comunes en JavaScript es la obtención de datos desde un servidor remoto utilizando APIs. JavaScript solicita datos a una API, pero el resto del código continúa ejecutándose en lugar de esperar la respuesta del servidor. Una vez que los datos están disponibles, se procesan utilizando un callback o una promesa.
index.html
index.js
- Código sincrónico: El párrafo con
id="syncMessage"demuestra que el código sincrónico se ejecuta inmediatamente después de iniciar la obtención asíncrona. Indica que el programa no se detiene mientras espera los datos de la API; - Obtención asíncrona: Una vez que se obtienen los datos, el párrafo con
id="apiOutput"se actualiza, mostrando la finalización de la tarea asíncrona.
Temporizadores (setTimeout y setInterval)
setTimeout() y setInterval() de JavaScript se utilizan comúnmente para programar tareas que se ejecutan después de un retraso o en intervalos regulares. Estas funciones no bloquean la ejecución de otro código. Las tareas que activan ocurren después de un retraso o intervalo especificado mientras el resto del código continúa ejecutándose.
index.html
index.js
- Código síncrono: El párrafo con
id="syncMessage"se actualiza de inmediato, mostrando que la parte síncrona del código se ejecuta sin esperar al temporizador; - Temporizador asíncrono: Después de 3 segundos, la función de retorno de
setTimeout()se completa y actualiza el párrafo conid="timerOutput"para indicar que el temporizador ha finalizado.
Manejo de eventos de entrada del usuario
JavaScript espera de forma asíncrona a que ocurran eventos sin bloquear el resto del código al tratar con interacciones del usuario (como clics, envíos de formularios o pulsaciones de teclas). Los escuchadores de eventos son no bloqueantes, lo que significa que el resto del programa puede continuar ejecutándose mientras espera la entrada del usuario.
index.html
index.js
- Código sincrónico: El párrafo con
id="syncMessage"muestra que el código sincrónico se ejecuta inmediatamente después de configurar el escuchador de eventos. No espera a que el usuario haga clic en el botón; - Manejo asíncrono de eventos: El escuchador de eventos del botón se activa cuando el usuario hace clic, actualizando el párrafo con
id="eventOutput".
¡Gracias por tus comentarios!
