O que são funções de retorno de chamada em JavaScript?

Se você é um programador, provavelmente já ouviu falar de funções, que são um conjunto de declarações que executam uma ação e retornam uma saída, mas quais são as funções de retorno de chamada?

A função de retorno de chamada é um conceito extremamente importante de JavaScript e é amplamente utilizado em promessas, ouvintes de eventos, matrizes e muito mais.

Vamos repassar o que são as funções de retorno de chamada e como usá -las em javascript neste tutorial, bem como também falaremos sobre as funções de retorno síncrono e assíncrono. Para ter conceitos claros e profundos de funções de retorno de chamada, também implementaremos alguns exemplos.

Função de retorno de chamada

Uma função de retorno de chamada é uma função que é passada pela primeira vez como um argumento para alguma outra função e precisa ser executado após as declarações escritas nessa definição de função e, como o nome indica, ela é executada mais tarde na função. Para colocá -lo em palavras simples, uma função de retorno de chamada é executada assim que o efeito atual é processado.

Sintaxe para escrever uma função de retorno de chamada em JavaScript

A sintaxe básica é:

função namefunc (callbackfunc)
callbackfunc ();

Isto é um Função 'Namefunc ()' Isso leva um Função 'callbackfunc ()' como um argumento. O Função 'callbackfunc ()' é chamado de dentro do Função 'Namefunc ()' Então é uma função de retorno de chamada de fato.

Exemplo 1

Suponha que queremos consolar.registre uma mensagem depois de 2 segundos.

function message ()
console.log ("Hello World depois de 2 segundos");

setTimeout (mensagem, 2000);

O Função setTimeout () é um método de javascript interno que leva um cronômetro e uma função de retorno de chamada como argumento. Agora a função da mensagem (uma função de retorno de chamada) será chamada e será executada quando o timer expirará.

No código acima, a mensagem da função () é passada como um argumento e é chamado após 2000 milissegundos (2 segundos). Agora, para relacionar isso com a função de volta, a função message () foi chamada após 2 segundos. Não foi executado antes daqueles 2 segundos. Portanto, é uma função de retorno de chamada.

Necessidade de funções de retorno de chamada?

Você deve estar pensando por que precisamos de funções de retorno de chamada. A resposta é simples. JavaScript é uma linguagem seqüencial ou de thread única, o que significa que executa sequencialmente linha por linha.

JavaScript não espera por uma resposta antes de passar para a próxima linha. Ele continuará executando e ouvindo outros eventos ou linhas de código.

Por exemplo:

Exemplo2

Suponha que estamos registrando 1 e 2 de duas funções diferentes para o console:

function FirstMessage ()
console.log ("1");

função secondMessage ()
console.log ("2");

Primeira Mensagem();
SecondMessage ();

Saída:

1
2

Como esperado, a função Primeira Mensagem() é executado primeiro e depois o função secondMessage () É executado.

Exemplo3

Suponha que o Método FirstMessage () compreende uma solicitação de API para recuperar dados de um servidor. Teremos que esperar pela resposta/resposta do servidor, portanto, vamos utilizar o método interno setTimeout mais uma vez.

Desta vez, atrasaremos a solicitação por 3 segundos para ver como podemos solicitar uma solicitação de busca de API.

function FirstMessage ()
// Função de tempo limite para retardar a solicitação
setTimeout (function ()
console.log ("1");
, 3000);

função secondMessage ()
console.log ("2");

Primeira Mensagem();
SecondMessage ();

Neste código, acabamos de mover o console.log ("1"); dentro de Função setTimeout ().

Agora, o que é realmente interessante é que, quando você executa este código, verá que os 2 serão mostrados primeiro no console:

Após 3 segundos, o 1 será mostrado:

Como podemos ver, o FULTMESSAGE () função foi chamado primeiro e depois o função secondMessage () foi chamado. No entanto, não podemos ver o resultado na sequência que chamamos de nossa função.

Não é que o JavaScript não retornasse nosso código sequencialmente, é que JavaScript não esperou pelo FULTMESSAGE () função para executar completamente e começar a executar o função secondMessage ().

Este exemplo foi colocado apenas aqui para mostrar por que precisamos de funções de retorno de chamada. Funções de retorno de chamada, vamos garantir que algum código não seja executado até que nosso código necessário seja executado.

Tipos de função de retorno de chamada

Agora que vimos o que são retornos de chamada, como eles são usados ​​e por que eles são importantes, vejamos os dois tipos de funções de retorno de chamada.

Função de retorno de chamada síncrona

As funções de retorno de chamada síncrona são executadas/executadas ao mesmo tempo que a função de ordem superior que está usando a função de retorno de chamada e está bloqueando principalmente; Ele conclui sua tarefa então fornece o controle a outra função ou linha de código.

Isso é benéfico, pois suponha que você esteja buscando itens de uma API. Você deseja que sua página carregue assim que buscar alguns dados de uma API. A menos que a resposta da API seja buscada, todo o site tem que esperar.

Exemplo 2 declarado acima, foram funções síncronas, pois executou linha por linha e uma vez que a primeira função foi executada apenas, o controle foi dado à segunda função i-e SecondMessage () função.

Função de retorno de chamada assíncrona

Assíncrono é completamente oposto ao síncrono, pois funciona paralelo ao chamador da função e da função de volta. Funções assíncronas são não bloqueadores como eles correm ou executam mais tarde que a função de ordem superior.

O exemplo 3 fornecido acima foi uma função de retorno de chamada assíncrona como chamamos de FULTMESSAGE () função Mas esperou dois segundos. Nesses dois segundos, devolveu o controle e o função secondMessage () foi executado. Uma vez que o tempo de três segundos terminou, o FULTMESSAGE () função começou a executar novamente.

Conclusão

A função de retorno de chamada é uma função que é fornecida pela primeira vez como um argumento a alguma outra função e precisa ser executado após as declarações escritas nessa definição de função. Aprendemos o que são as funções de retorno de chamada e como usá -las em JavaScript, bem como por que as funções de retorno de chamada são importantes e quais são os dois tipos de funções de retorno de chamada nesta postagem.