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