Introdução ao JavaScript Assíncrono
O que é Programação Assíncrona?
A programação assíncrona permite que seu código execute operações sem bloqueio. Em contraste com a programação síncrona—onde cada operação espera a anterior ser concluída antes de continuar—programação assíncrona permite que outras tarefas prossigam sem aguardar o término da tarefa anterior.
Isso é fundamental no desenvolvimento web, onde pode ser necessário realizar tarefas demoradas, como buscar dados de uma API, aguardar a entrada do usuário ou configurar temporizadores.
Imagine que estamos desenvolvendo um programa onde 1 e 2 são requisições ao servidor, e 3, 4 e 5 são outras operações, como lidar com interações do usuário.
No modelo síncrono, as tarefas 1 e 2 bloqueiam a execução de 3, 4 e 5 até que sejam concluídas. Por exemplo, se um usuário publica um comentário (1) e depois tenta abrir uma barra lateral (3), a interface ficará congelada até que o comentário seja processado, causando atrasos.
No modelo assíncrono, as requisições ao servidor (1 e 2) não bloqueiam o programa. Enquanto aguarda uma resposta, o programa continua com outras tarefas (3, 4 e 5). Isso permite que o usuário interaja com a barra lateral imediatamente após publicar o comentário, melhorando a responsividade.
Diferenças Entre Comportamento Síncrono e Assíncrono
Programação Síncrona
Na programação síncrona, as tarefas são executadas uma após a outra. Cada tarefa deve ser concluída antes que a próxima comece. Se uma tarefa demorar muito (por exemplo, upload de um arquivo grande), ela bloqueia todas as tarefas subsequentes, o que pode tornar a aplicação não responsiva.
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');
Neste exemplo, a Tarefa 2 só será executada após a conclusão da tarefa de longa duração (o loop). Isso bloqueia a execução do código e pode travar o navegador.
Programação Assíncrona
Na programação assíncrona, tarefas podem ser iniciadas e executadas posteriormente sem bloquear o restante do código. Isso permite que outras tarefas continuem enquanto operações de longa duração (por exemplo, busca de dados) são concluídas. Garante que tarefas como requisições de rede ou temporizadores não interrompam o fluxo de outras operações da aplicação.
index.html
index.css
index.js
Neste exemplo, a Tarefa 1 é executada imediatamente, a Tarefa 3 também é executada imediatamente e a Tarefa 2 é executada após 2 segundos. O comportamento assíncrono permite que o programa continue sem esperar a conclusão da Tarefa 2.
Exemplos do Mundo Real de Operações Assíncronas
Busca de Dados em uma API
Uma das operações assíncronas mais comuns em JavaScript é buscar dados de um servidor remoto utilizando APIs. O JavaScript solicita dados de uma API, mas o restante do código continua a ser executado em vez de aguardar a resposta do servidor. Assim que os dados estão disponíveis, eles são processados utilizando um callback ou promise.
index.html
index.js
- Código Síncrono: O parágrafo com
id="syncMessage"demonstra que o código síncrono é executado imediatamente após o início da busca assíncrona. Isso mostra que o programa não é pausado enquanto aguarda os dados da API; - Busca Assíncrona: Assim que os dados são buscados, o parágrafo com
id="apiOutput"é atualizado, demonstrando a conclusão da tarefa assíncrona.
Temporizadores (setTimeout e setInterval)
setTimeout() e setInterval() do JavaScript são amplamente utilizados para agendar tarefas para serem executadas após um atraso ou em intervalos regulares. Essas funções não bloqueiam a execução de outros códigos. As tarefas que elas disparam ocorrem após o atraso ou intervalo especificado, enquanto o restante do código continua em execução.
index.html
index.js
- Código Síncrono: O parágrafo com
id="syncMessage"é atualizado imediatamente, mostrando que a parte síncrona do código é executada sem aguardar o temporizador; - Temporizador Assíncrono: Após 3 segundos, o callback do
setTimeout()é concluído e atualiza o parágrafo comid="timerOutput"para indicar que o temporizador terminou.
Manipulação de Eventos de Entrada do Usuário
JavaScript aguarda eventos de forma assíncrona sem bloquear outros códigos ao lidar com interações do usuário (como cliques, envios de formulários ou pressionamento de teclas). Os ouvintes de eventos são não bloqueantes, permitindo que o restante do programa continue executando enquanto aguarda a entrada do usuário.
index.html
index.js
- Código Síncrono: O parágrafo com
id="syncMessage"demonstra que o código síncrono é executado imediatamente após a configuração do ouvinte de eventos. Não aguarda o usuário clicar no botão; - Manipulação de Eventos Assíncrona: O ouvinte de eventos do botão é acionado quando o usuário clica, atualizando o parágrafo com
id="eventOutput".
Obrigado pelo seu feedback!
Pergunte à IA
Pergunte à IA
Pergunte o que quiser ou experimente uma das perguntas sugeridas para iniciar nosso bate-papo
Awesome!
Completion rate improved to 2.22Introdução ao JavaScript Assíncrono
Deslize para mostrar o menu
O que é Programação Assíncrona?
A programação assíncrona permite que seu código execute operações sem bloqueio. Em contraste com a programação síncrona—onde cada operação espera a anterior ser concluída antes de continuar—programação assíncrona permite que outras tarefas prossigam sem aguardar o término da tarefa anterior.
Isso é fundamental no desenvolvimento web, onde pode ser necessário realizar tarefas demoradas, como buscar dados de uma API, aguardar a entrada do usuário ou configurar temporizadores.
Imagine que estamos desenvolvendo um programa onde 1 e 2 são requisições ao servidor, e 3, 4 e 5 são outras operações, como lidar com interações do usuário.
No modelo síncrono, as tarefas 1 e 2 bloqueiam a execução de 3, 4 e 5 até que sejam concluídas. Por exemplo, se um usuário publica um comentário (1) e depois tenta abrir uma barra lateral (3), a interface ficará congelada até que o comentário seja processado, causando atrasos.
No modelo assíncrono, as requisições ao servidor (1 e 2) não bloqueiam o programa. Enquanto aguarda uma resposta, o programa continua com outras tarefas (3, 4 e 5). Isso permite que o usuário interaja com a barra lateral imediatamente após publicar o comentário, melhorando a responsividade.
Diferenças Entre Comportamento Síncrono e Assíncrono
Programação Síncrona
Na programação síncrona, as tarefas são executadas uma após a outra. Cada tarefa deve ser concluída antes que a próxima comece. Se uma tarefa demorar muito (por exemplo, upload de um arquivo grande), ela bloqueia todas as tarefas subsequentes, o que pode tornar a aplicação não responsiva.
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');
Neste exemplo, a Tarefa 2 só será executada após a conclusão da tarefa de longa duração (o loop). Isso bloqueia a execução do código e pode travar o navegador.
Programação Assíncrona
Na programação assíncrona, tarefas podem ser iniciadas e executadas posteriormente sem bloquear o restante do código. Isso permite que outras tarefas continuem enquanto operações de longa duração (por exemplo, busca de dados) são concluídas. Garante que tarefas como requisições de rede ou temporizadores não interrompam o fluxo de outras operações da aplicação.
index.html
index.css
index.js
Neste exemplo, a Tarefa 1 é executada imediatamente, a Tarefa 3 também é executada imediatamente e a Tarefa 2 é executada após 2 segundos. O comportamento assíncrono permite que o programa continue sem esperar a conclusão da Tarefa 2.
Exemplos do Mundo Real de Operações Assíncronas
Busca de Dados em uma API
Uma das operações assíncronas mais comuns em JavaScript é buscar dados de um servidor remoto utilizando APIs. O JavaScript solicita dados de uma API, mas o restante do código continua a ser executado em vez de aguardar a resposta do servidor. Assim que os dados estão disponíveis, eles são processados utilizando um callback ou promise.
index.html
index.js
- Código Síncrono: O parágrafo com
id="syncMessage"demonstra que o código síncrono é executado imediatamente após o início da busca assíncrona. Isso mostra que o programa não é pausado enquanto aguarda os dados da API; - Busca Assíncrona: Assim que os dados são buscados, o parágrafo com
id="apiOutput"é atualizado, demonstrando a conclusão da tarefa assíncrona.
Temporizadores (setTimeout e setInterval)
setTimeout() e setInterval() do JavaScript são amplamente utilizados para agendar tarefas para serem executadas após um atraso ou em intervalos regulares. Essas funções não bloqueiam a execução de outros códigos. As tarefas que elas disparam ocorrem após o atraso ou intervalo especificado, enquanto o restante do código continua em execução.
index.html
index.js
- Código Síncrono: O parágrafo com
id="syncMessage"é atualizado imediatamente, mostrando que a parte síncrona do código é executada sem aguardar o temporizador; - Temporizador Assíncrono: Após 3 segundos, o callback do
setTimeout()é concluído e atualiza o parágrafo comid="timerOutput"para indicar que o temporizador terminou.
Manipulação de Eventos de Entrada do Usuário
JavaScript aguarda eventos de forma assíncrona sem bloquear outros códigos ao lidar com interações do usuário (como cliques, envios de formulários ou pressionamento de teclas). Os ouvintes de eventos são não bloqueantes, permitindo que o restante do programa continue executando enquanto aguarda a entrada do usuário.
index.html
index.js
- Código Síncrono: O parágrafo com
id="syncMessage"demonstra que o código síncrono é executado imediatamente após a configuração do ouvinte de eventos. Não aguarda o usuário clicar no botão; - Manipulação de Eventos Assíncrona: O ouvinte de eventos do botão é acionado quando o usuário clica, atualizando o parágrafo com
id="eventOutput".
Obrigado pelo seu feedback!
