Resumo : neste tutorial, você aprenderá sobre o loop de eventos em JavaScript e como o JavaScript atinge o modelo de simultaneidade baseado no loop de eventos.
Modelo JavaScript de thread único
JavaScript é uma linguagem de programação de thread único. Isso significa que o JavaScript pode fazer apenas uma coisa em um único momento.
O mecanismo JavaScript executa um script da parte superior do arquivo e desce. Ele cria os contextos de execução , empurra e coloca funções dentro e fora da pilha de chamadas na fase de execução.
Se uma função demorar muito para ser executada, você não poderá interagir com o navegador da Web durante a execução da função porque a página trava.
Uma função que leva muito tempo para ser concluída é chamada de função de bloqueio. Tecnicamente, uma função de bloqueio bloqueia todas as interações na página web, como cliques do mouse.
Um exemplo de função de bloqueio é uma função que chama uma API de um servidor remoto.
O exemplo a seguir usa um grande loop para simular uma função de bloqueio:
function task(message) {
// emulate time consuming task
let n = 10000000000;
while (n > 0){
n--;
}
console.log(message);
}
console.log('Start script...');
task('Call an API');
console.log('Done!');Linguagem de código: JavaScript ( javascript )Neste exemplo, temos um grande whileloop dentro da task()função que emula uma tarefa demorada. A task()função é uma função de bloqueio.
O script trava por alguns segundos (dependendo da velocidade do computador) e emite a seguinte saída:
Start script...
Download a file.
Done!Para executar o script, o mecanismo JavaScript coloca a primeira chamada console.log()no topo da pilha de chamadas e a executa. Em seguida, ele coloca a task()função no topo da pilha de chamadas e executa a função.
No entanto, demorará um pouco para concluir a task()função. Portanto, você verá a mensagem 'Download a file.'um pouco mais tarde. Após a task()conclusão da função, o mecanismo JavaScript a retira da pilha de chamadas.
Por fim, o mecanismo JavaScript faz a última chamada da console.log('Done!')função e a executa, o que será muito rápido.
Retornos de chamada para o resgate
Para evitar que uma função de bloqueio bloqueie outras atividades, normalmente você a coloca em uma função de retorno de chamada para execução posterior. Por exemplo:
console.log('Start script...');
setTimeout(() => {
task('Download a file.');
}, 1000);
console.log('Done!');Linguagem de código: JavaScript ( javascript )Neste exemplo, você verá a mensagem 'Start script...'imediatamente 'Done!'. E depois disso, você verá a mensagem 'Download a file'.
Aqui está o resultado:
Start script...
Done!
Download a file.Conforme mencionado anteriormente, o mecanismo JavaScript pode fazer apenas uma coisa por vez. Entretanto, é mais preciso dizer que o tempo de execução do JavaScript pode fazer uma coisa de cada vez.
O navegador da web também possui outros componentes, não apenas o mecanismo JavaScript.
Quando você chama a setTimeout()função, faz uma solicitação de busca ou clica em um botão, o navegador da web pode realizar essas atividades de forma simultânea e assíncrona.
As setTimeout()solicitações de busca e os eventos DOM fazem parte das APIs da Web do navegador da Web.
Em nosso exemplo, ao chamar a setTimeout()função, o mecanismo JavaScript a coloca na pilha de chamadas e a API Web cria um cronômetro que expira em 1 segundo.
Em seguida, o mecanismo JavaScript coloca a task()função em uma fila chamada fila de retorno de chamada ou fila de tarefas:
O loop de eventos é um processo em execução constante que monitora a fila de retorno de chamada e a pilha de chamadas.
Se a pilha de chamadas não estiver vazia, o loop de eventos espera até que esteja vazio e coloca a próxima função da fila de retorno de chamada na pilha de chamadas. Se a fila de retorno de chamada estiver vazia, nada acontecerá:
Veja outro exemplo:
console.log('Hi!');
setTimeout(() => {
console.log('Execute immediately.');
}, 0);
console.log('Bye!');
Linguagem de código: JavaScript ( javascript )Neste exemplo, o tempo limite é 0 segundos, portanto a mensagem 'Execute immediately.'deve aparecer antes da mensagem 'Bye!'. No entanto, não funciona assim.
O mecanismo JavaScript coloca a seguinte chamada de função na fila de retorno de chamada e a executa quando a pilha de chamadas está vazia. Em outras palavras, o mecanismo JavaScript o executa após o arquivo console.log('Bye!').
console.log('Execute immediately.');Linguagem de código: JavaScript ( javascript )Aqui está o resultado:
Hi!
Bye!
Execute immediately.A imagem a seguir ilustra o tempo de execução do JavaScript, a API da Web, a pilha de chamadas e o loop de eventos:
Neste tutorial, você aprendeu sobre o loop de eventos JavaScript, um processo em execução constante que coordena as tarefas entre a pilha de chamadas e a fila de retorno de chamada para obter simultaneidade.
