Entendendo o JavaScript síncrono e assíncrono - Parte 1

Síncrono e assíncrono são conceitos confusos em JavaScript, especialmente para iniciantes. Duas ou mais coisas são síncrono quando eles acontecer ao mesmo tempo (em sincronia) e assíncrono quando não o fazem (não em sincronia).

Embora essas definições sejam fáceis de entender, na verdade é mais complicado do que parece. Precisamos levar em conta o que exatamente está em sincronia, e o que não são.

Você provavelmente ligaria para normal função em JavaScript síncrono, certo? E se é algo como setTimeout () ou AJAX com o qual você está trabalhando, você se referirá a ele como sendo assíncrono, sim? E se eu disser que ambos são assíncronas de uma maneira?

Para explicar o porque, precisamos pedir ajuda ao Sr. X.

Cenário 1 - O Sr. X está tentando sincronicidade

Aqui está a configuração:

1. O Sr. X é alguém que pode responder a perguntas difíceis e realizar qualquer tarefa solicitada.
2. A única maneira de contatá-lo é através de um telefonema.
3. Seja qual for a pergunta ou tarefa que você tenha, a fim de pedir ajuda ao Sr. X para realizá-lo; Você o chama.
4. O Sr. X dá a resposta ou completa a tarefa Imediatamente, e permite que você saiba está feito.
5. Você coloca o receptor sentindo o conteúdo e sai para um filme.

O que você acabou de realizar foi um comunicação síncrona (para frente e para trás) com o Sr. X. Ele ouviu como você estava fazendo a sua pergunta, e você ouviu quando ele estava respondendo.

Cenário 2 - O Sr. X não está feliz com a sincronicidade

Como o Sr. X é tão eficiente, ele começa a receber muito mais chamadas. Então, o que acontece quando você o chama, mas ele já está ocupado conversando com outra pessoa? Você não poderá fazer sua pergunta a ele - não até que ele esteja livre para receber sua ligação. Tudo o que você ouvirá é um tom de ocupado.

Então, o que o Sr. X pode fazer para combater isso??

Em vez de receber chamadas diretamente:

1. O Sr. X contrata um cara novo, o Sr. M, e dá a ele uma secretária eletrônica para os chamadores. deixar mensagens.
2. O trabalho do Sr. M é passar uma mensagem da secretária eletrônica para o Sr. X, uma vez que ele saiba que o Sr. X terminou completamente o processamento de todas as mensagens anteriores e já está livre para levar um novo.
3. Então agora, quando você liga para ele, em vez de ter um tom de ocupado, você pode deixar uma mensagem para o Sr. X, então espere ele ligar de volta (sem tempo de filme ainda).
4. Uma vez que o Sr. X termine com todas as mensagens enfileiradas que recebeu antes da sua, ele irá analisar sua questão, e te ligar de volta para lhe dar uma resposta.

Agora, aqui está a pergunta: foram as ações até agora síncrono ou assíncrono?

Está misturado. Quando você deixou sua mensagem, O Sr. X não estava ouvindo, então a quarta comunicação foi assíncrona.

Mas quando ele respondeu, você estava lá ouvindo, qual faz a comunicação de retorno síncrona.

Espero que agora você tenha adquirido uma melhor compreensão de como a sincronicidade é percebida em termos de comunicação. Hora de trazer JavaScript.

JavaScript - uma linguagem de programação assíncrona

Quando alguém rotula JavaScript assíncrono, o que eles estão se referindo em geral é como você pode Deixe um recado para isso, e não tem sua chamada bloqueada com um tom de ocupado.

As chamadas de função são nunca dirija em JavaScript, eles estão literalmente feitos via mensagens.

JavaScript usa um fila de mensagens onde mensagens de entrada (ou eventos) são mantidas. A loop de eventos (um despachador de mensagens) envia sequencialmente essas mensagens para um pilha de chamadas onde as funções correspondentes das mensagens são empilhados como quadros (argumentos e variáveis ​​de função) para execução.

A pilha de chamadas contém o quadro da função inicial que está sendo chamada e quaisquer outros quadros para funções chamadas através de chamadas aninhadas no topo disso .

Quando uma mensagem entra na fila, ela aguarda até que a pilha de chamadas seja vazio de todos os quadros da mensagem anterior, e quando é, o evento-loop dequeues a mensagem anterior, e adiciona os quadros correspondentes da mensagem atual à pilha de chamadas.

A mensagem aguarda novamente até que a pilha de chamadas se torne vazio de seus próprios quadros correspondentes (isto é, as execuções de todas as funções empilhadas acabaram), então é removido.

Considere o seguinte código:

 function foo ()  barra de funções () foo (); function baz () bar ();  baz (); 

A função que está sendo executada é baz () (na última linha do snippet de código), para o qual uma mensagem é adicionada à fila, e quando o evento-loop pega, a pilha de chamadas começa a empilhar quadros para baz (), Barra(), e foo () nos pontos relevantes de execução.

Uma vez que a execução das funções é concluída uma a uma, seus quadros são removido da pilha de chamadas, enquanto a mensagem é ainda esperando na fila, até baz () é retirado da pilha.

Lembre-se, as chamadas de função são nunca dirija em JavaScript, eles estão feitos via mensagens. Então, sempre que você ouvir alguém dizer que o JavaScript em si é uma linguagem de programação assíncrona, suponha que eles estejam falando sobre o seu built-in “secretária eletrônica”, e como você é livre para deixar mensagens.

Mas e os métodos assíncronos específicos?

Até agora eu não toquei em APIs como setTimeout () e AJAX, esses são os que são especificamente referido como assíncrono. Por que é que?

É importante entender exatamente o que está sendo síncrono ou assíncrono. JavaScript, com a ajuda de eventos e do loop de eventos, pode praticar processamento assíncrono de mensagens, mas isso não significa tudo em JavaScript é assíncrono.

Lembre-se, eu lhe disse que a mensagem não saiu até que a pilha de chamadas foi vazio de seus quadros correspondentes, assim como você não saiu para um filme até ter sua resposta - isso é sendo síncrono, você está aí esperando até que a tarefa esteja completa, e você obtém a resposta.

Esperando não é ideal em todos os cenários. E se depois de deixar uma mensagem, em vez de esperar, você pode sair para o filme? E se uma função puder se aposentar (esvaziar a pilha de chamadas) e sua mensagem puder ser desenfileirada mesmo antes que a tarefa da função esteja completa? E se você puder ter código executado de forma assíncrona?

É aqui que as APIs, como setTimeout () e AJAX entram em cena, e o que eles fazem é ... espere, não posso explicar isso sem voltar ao Sr. X, o que veremos na segunda parte deste artigo. Fique ligado.