"Voltarei a ligar mais tarde!"
Um retorno de chamada é uma função passada como argumento para outra função
Esta técnica permite que uma função chame outra função
Uma função de retorno de chamada pode ser executada após a conclusão de outra função
As funções JavaScript são executadas na sequência em que são chamadas. Não na sequência em que são definidos.
Este exemplo acabará exibindo "Adeus":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
</script>
</body>
</html>
Este exemplo acabará exibindo "Hello":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myFirst() {
myDisplayer("Hello");
}
function mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
</script>
</body>
</html>
Às vezes você gostaria de ter melhor controle sobre quando executar uma função.
Suponha que você queira fazer um cálculo e depois exibir o resultado.
Você poderia chamar uma função de calculadora (myCalculator), salvar o resultado, e depois chame outra função (myDisplayer) para exibir o resultado:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
return sum;
}
let result = myCalculator(5, 5);
myDisplayer(result);
</script>
</body>
</html>
Ou você pode chamar uma função de calculadora (myCalculator), e deixe a função calculadora chamar a função display (myDisplayer):
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Function Sequence</h2>
<p>JavaScript functions are executed in the sequence they are called.</p>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
</script>
</body>
</html>
O problema com o primeiro exemplo acima é que você precisa chamar duas funções para exibir o resultado.
O problema com o segundo exemplo é que você não pode impedir que a função calculadora exibindo o resultado.
Agora é hora de trazer um retorno de chamada.
Um retorno de chamada é uma função passada como argumento para outra função.
Usando um retorno de chamada, você poderia chamar a função calculadora (myCalculator) com um retorno de chamada (myCallback) e deixe a função calculadora executar o retorno de chamada após a conclusão do cálculo:
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);Experimente você mesmo →
<!DOCTYPE html>
<html>
<body>
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p>The result of the calculation is:</p>
<p id="demo"></p>
<script>
function myDisplayer(something) {
document.getElementById("demo").innerHTML = something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
</script>
</body>
</html>
No exemplo acima, myDisplayer é chamada de função de retorno de chamada.
Ele é passado para myCalculator() como um argumento.
Ao passar uma função como argumento, lembre-se de não usar parênteses.
Direita: minhaCalculadora(5, 5, meuDisplayer);
Errado: myCalculator(5, 5, myDisplayer());
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Keep only positive numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}Experimente você mesmo →
<!DOCTYPE html>
<html>
<body style="text-align: right">
<h1>JavaScript Functions</h1>
<h2>Callback Functions</h2>
<p id="demo"></p>
<script>
// Create an Array
const myNumbers = [4, 1, -20, -7, 5, 9, -6];
// Call removeNeg with a Callback
const posNumbers = removeNeg(myNumbers, (x) => x >= 0);
// Display Result
document.getElementById("demo").innerHTML = posNumbers;
// Remove negative numbers
function removeNeg(numbers, callback) {
const myArray = [];
for (const x of numbers) {
if (callback(x)) {
myArray.push(x);
}
}
return myArray;
}
</script>
</body>
</html>
No exemplo acima, (x) => x >= 0 é uma função de retorno de chamada.
É passado para removeNeg() como um argumento.
Os exemplos acima não são muito emocionantes.
Eles são simplificados para ensinar a sintaxe de retorno de chamada.
Onde os retornos de chamada realmente brilham são nas funções assíncronas, onde uma função tem que esperar por outra função (como esperar o carregamento de um arquivo).
Funções assíncronas são abordadas no próximo capítulo.