Loops de eventos em JavaScript | Explicado com exemplos
O contexto de execução global mantém uma pilha de todas as funções que estão sendo executadas, funciona no comportamento “ultimo a entrar primeiro a sair”. Considerando que o ambiente da API da web capta as funções que fazem parte da API da Web (chamadas de API, chamada AJAX, setTimeout () e muito mais) da pilha de execução e começa a executá -las em seu próprio ambiente. Isso, por sua vez, permite que a pilha de execução funcione em outra coisa, implementando um comportamento assíncrono.
Quando a API da Web terminar de executar na função, ela coloca o resultado na fila do evento. Sempre que a pilha de execução está vazia, o loop do evento pega a função na fila de eventos e a coloca de volta na pilha de execução. Todo esse círculo é conhecido como o Loops de eventos em javascript.
Experimente este código seqüencial simples:
função f2 ()console.log ("função interna f2");
console.log ("F2 terminou");
função f1 ()
console.log ("Função interna F1");
f2 ();
console.log ("final da função f1");
f1 ();
A saída deste código é como
Este código se parece com isso na pilha de execução:
A pilha funciona nesta ordem:
- Ponteiros entram F1, e executa o comando para imprimir “Inside Function F1” e remove -o da pilha
- Ponteiro vê a linha f2 () e entra no F2
- O ponteiro executa "Função interna F2" e a remove da pilha
- Imprime as linhas “F2 terminou de funcionar” e a remove da pilha
- Desde F2 está pronto, ele removeu o “f2 (); da pilha e retorna para F1 para executar a parte restante do F1 função
- Imprime a linha “Fim da função F1” e a remove da pilha
- Já que nenhum comando é deixado em F1 (), O ponteiro remove -o da pilha também.
Agora, que você sabe como funciona a pilha de execução, você pode passar para o exemplo de código assíncrono testando as seguintes linhas de código:
função f2 ()console.log ("função interna f2");
setTimeout (() =>
console.log ("F2 terminou");
, 3000);
função f1 ()
console.log ("Função interna F1");
f2 ();
console.log ("final da função f1");
f1 ();
Como você pode ver, em função f2 () Agora estamos fazendo uma tarefa que leva 3 segundos para terminar. Quando o ponteiro chega a isso setTimeout () Declaração, ele o coloca dentro do ambiente da Web Apis e o remove da pilha de execução.
A pilha de execução continuará trabalhando na outra parte do código, enquanto a API da Web espera pelo setTimeout () para terminar como:
Depois disto setTimeout () As instruções foram transferidas para o ambiente da API da Web, a pilha de execução ficará assim:
Como você pode ver, enquanto a API da Web está trabalhando na função Settimeout, a pilha de execução está trabalhando em outras instruções e removendo -as da pilha. Quando a API da Web termina de trabalhar no “setTimeout ()”Ele o moverá para a fila do evento, enquanto os loops do evento esperam que a pilha de execução fique vazia.
Quando a pilha estiver vazia, o loop do evento moverá o setTimeout resultar na pilha de execução como:
E então:
É assim que o loop do evento funciona, é por isso que você obtém a seguinte saída em seu console:
Com a saída acima, você pode verificar a execução do loop do evento
Conclusão
O loop de eventos é uma função que move as instruções que aguardam para serem executadas na pilha de execução global da fila do evento. Sempre que uma função como setTimeout () precisa ser executado simultaneamente, ele é movido da pilha de execução para o ambiente da API da Web. A API da Web funciona na instrução enquanto o JavaScript continua a executar outras partes do código, uma vez que a API da Web terminar de trabalhar na instrução, ela coloca a instrução ou função na fila de eventos de onde é movida para a pilha de execução sempre que a A pilha está vazia. Este todo ciclo é conhecido como o Loop de eventos.