34

Pelo que sei, programação assíncrona em C#, por exemplo, se usa da ideia de threads. As tarefas a serem executadas podem ser divididas nas threads e então podem ser executadas paralelamente. Sempre imaginei que JavaScript fosse igual e que, por exemplo, quando chamamos a função Q.defer estamos instruindo que aquele código deve ser transferido para outra thread.

Acontece que depois descobri que JavaScript não tem isso. Ele roda em uma thread só e não tem como distribuir as tarefas em threads. Mas ainda assim a programação assíncrona é um dos pontos principais da linguagem. Como que isso é feito no JavaScript e qual a relação disso com promessas e callbacks?

1

1 Resposta 1

46

A programação assíncrona é um dos pontos principais da linguagem justamente porque o JavaScript roda em uma única thread. Se só existe uma thread para executar seu código, é preciso evitar ao máximo que esse código bloqueie a thread. Por isso, operações demoradas como requisições HTTP e acesso ao disco, ou a um banco de dados, são tipicamente executadas de maneira assíncrona.

É bom esclarecer que o código JavaScript é sempre processado por uma única thread, mas isso não quer dizer que o engine da linguagem e sua aplicação hospedeira (host) só usem uma thread. Por exemplo, se uma aplicação Node.js requisita um acesso ao disco, o Node pode muito bem utilizar outra thread para realizar esse acesso. Mas o código que solicita esse acesso e o código do callback que trata o resultado executam naquela thread única dedicada ao código JavaScript.

Essa thread única executa um loop de eventos (event loop).

Existe um componente separado responsável por popular a fila de eventos, popularmente chamado de event pump ("bomba de eventos", pois "bombeia" eventos para a fila). Segundo a Wikipedia, ele é tipicamente implementado como uma thread separada. Portanto, event pump e event loop operam de maneira assíncrona em relação um ao outro. O event loop é o responsável pela execução do código JavaScript, processando um evento por vez, conforme a fila.

O loop de eventos seria algo mais ou menos assim:

while(true) {
    // Existem eventos na fila?
    // Se sim, pega o código do primeiro da fila e executa de maneira síncrona.
}

A cada iteração do loop (tick), o engine verifica se existe algum evento na fila. No browser, isso pode ser um timer expirado, uma resposta de requisição XHR, ou um evento de interface (como um event listener de um clique em algum elemento). Em JavaScript no servidor existem ainda outros casos, como acesso assíncrono ao disco ou a um banco de dados. Se existem eventos na fila, o primeiro da fila é processado, e o callback correspondente é executado de maneira síncrona. Cada tick do loop tem sua própria pilha de execução de funções. No final de cada tick a pilha está sempre vazia.

Fica mais fácil de entender com um exemplo. Considere o seguinte código, que cria um timer cujo callback altera o valor da variável x e deve ser executado em 500 milissegundos:

var x = 0, i;
setTimeout(function() {
    x = 10;
}, 500);
for(i=0; i<100; i++) {
    // faz algo
}

Isso é processado da seguinte maneira:

Tick 0: Fila de eventos vazia. Cria as variáveis x e i; atribui valor 0 a x; agenda o callback do timer para executar em 500ms; executa o corpo do loop for 100 vezes.

Tick 1: Fila de eventos vazia (não se passaram 500ms). Não faz nada.

(...)

Tick N: 1 evento (timer expirado) na fila. Executa o callback pendente, ou seja, atribui valor 10 à variável x capturada via closure.

Repare que não existe garantia que o callback do nosso timer rode exatamente 500ms após o início do timer. Ele será executado na primeira oportunidade possível em que a condição estiver satisfeita. Por exemplo, se o corpo do loop for executar alguma operação lenta que tome 600ms para executar, nosso callback será executado no tick 1, cerca de 600ms após o agendamento (ou seja, atrasado em relação ao agendamento).

Com promessas o mecanismo é exatamente o mesmo, já que promessas em JavaScript são apenas uma maneira mais complexa, porém com sintaxe mais limpa, para se usar callbacks. Nem eram uma construção nativa da linguagem em ECMAScript 5, só foram incluídas nas versões seguintes.

Referências

10
  • 1
    Excelente resposta. Algumas obervações: "Em JavaScript no servidor existem ainda outros casos, como acesso assíncrono ao disco ou a um banco de dados." - mesmo que seu uso seja um pouco mais incomum, temos a IndexedDB e File System API que proveem funcionalidade bem similar no front-end também. (cont) Commented 26/05/2014 às 21:04
  • 1
    Obrigado pelas observações, @FabrícioMatté. Eu realmente tinha esquecido do IndexedDB e FS API. Mas acho que podem ficar de fora (só citei como exemplos), como fiz com os Web Workers, que são um caso à parte (funcionam como threads separadas, sejam ou não implementados como tal – não sei como é de fato). As promises nativas previstas para ES6 eu também deixei de fora intencionalmente, para não me alongar na resposta.
    – bfavaretto
    Commented 26/05/2014 às 21:33
  • 1
    @FabrícioMatté Não acho errôneo, estou falando de ES5. Eu posso até acrescentar que isso está começando a ser implementado nativamente, e que deve fazer parte da próxima versão da especificação. Mas não sei bem como vai funcionar (estou atrasado nos meus estudos de ES6). E se for algo como as "classes" do ES6, que serão apenas syntax sugar para a herança prototípica? Vou estudar o link que você passou e ver o que posso melhorar.
    – bfavaretto
    Commented 26/05/2014 às 22:00
  • 1
    Ah, o tutorial do HTML5 Rocks sobre Promises é bem mais detalhado sobre conceitos e utilização do que a página da MDN que linkei previamente. Commented 26/05/2014 às 22:27
  • 1
    Valeu @FabrícioMatté, tenho leitura pro resto da semana :) Já trabalhei bastante com $.Deferred, e brinquei um pouco com Q, mas quero ver como isso será especificado em ES6. Tenho a impressão de que não será tratado de maneira diferenciada no event loop. Mexi um pouco na última frase para esclarecer que promises estão previstas em ES6 e implementadas experimentalmente por alguns browsers.
    – bfavaretto
    Commented 27/05/2014 às 3:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .