Neste tutorial, você aprenderá sobre as funções de retorno de chamada do JavaScript com a ajuda de exemplos.
Uma função é um bloco de código que executa uma determinada tarefa quando chamado. Por exemplo,
// function function greet(name) ( console.log('Hi' + ' ' + name); ) greet('Peter'); // Hi Peter
No programa acima, um valor de string é passado como um argumento para a greet()função.
Em JavaScript, você também pode passar uma função como um argumento para uma função. Essa função que é passada como um argumento dentro de outra função é chamada de função de retorno de chamada. Por exemplo,
// function function greet(name, callback) ( console.log('Hi' + ' ' + name); callback(); ) // callback function function callMe() ( console.log('I am callback function'); ) // passing function as an argument greet('Peter', callMe);
Resultado
Olá Peter, sou a função de retorno de chamada
No programa acima, existem duas funções. Ao chamar a greet()função, dois argumentos (um valor de string e uma função) são passados.
A callMe()função é uma função de retorno de chamada.
Benefício da função de retorno de chamada
A vantagem de usar uma função de retorno de chamada é que você pode esperar pelo resultado de uma chamada de função anterior e, em seguida, executar outra chamada de função.
Neste exemplo, vamos usar o setTimeout()método para simular o programa que leva tempo para ser executado, como dados vindos do servidor.
Exemplo: Programa com setTimeout ()
// program that shows the delay in execution function greet() ( console.log('Hello world'); ) function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function setTimeout(greet, 2000); sayName('John');
Resultado
Olá joão olá mundo
Como você sabe, o método setTimeout () executa um bloco de código após o tempo especificado.
Aqui, a greet()função é chamada após 2.000 milissegundos ( 2 segundos). Durante essa espera, o sayName('John');é executado. É por isso que Hello John é impresso antes de Hello world.
O código acima é executado de forma assíncrona (a segunda função; sayName()não espera a primeira função; greet()para ser concluída).
Exemplo: usando uma função de retorno de chamada
No exemplo acima, a segunda função não espera que a primeira seja concluída. No entanto, se quiser esperar o resultado da chamada de função anterior antes que a próxima instrução seja executada, você pode usar uma função de retorno de chamada. Por exemplo,
// Callback Function Example function greet(name, myFunction) ( console.log('Hello world'); // callback function // executed only after the greet() is executed myFunction(name); ) // callback function function sayName(name) ( console.log('Hello' + ' ' + name); ) // calling the function after 2 seconds setTimeout(greet, 2000, 'John', sayName);
Resultado
Olá mundo olá joão
No programa acima, o código é executado de forma síncrona. A sayName()função é passada como um argumento para a greet()função.
O setTimeout()método executa a greet()função somente após 2 segundos. No entanto, a sayName()função aguarda a execução da greet()função.
Observação : a função de retorno de chamada é útil quando você precisa esperar por um resultado que leva tempo. Por exemplo, os dados vêm de um servidor porque leva tempo para os dados chegarem.
