"¡Volveré a llamar más tarde!"
Una devolución de llamada es una función que se pasa como argumento a otra función.
Esta técnica permite que una función llame a otra función.
Una función de devolución de llamada se puede ejecutar después de que otra función haya finalizado
Las funciones de JavaScript se ejecutan en la secuencia en la que se llaman. No en la secuencia en la que están definidos.
Este ejemplo terminará mostrando "Adiós":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();Pruébelo usted mismo →
<!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 ejemplo terminará mostrando "Hola":
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();Pruébelo usted mismo →
<!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>
A veces le gustaría tener un mejor control sobre cuándo ejecutar una función.
Supongamos que desea hacer un cálculo y luego mostrar el resultado.
Podrías llamar a una función de calculadora (myCalculator), guardar el resultado, y luego llame a otra función (myDisplayer) para mostrar el 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);Pruébelo usted mismo →
<!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>
O bien, podría llamar a una función de calculadora (myCalculator), y deje que la función de calculadora llame a la función de visualización (myDisplayer):
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);Pruébelo usted mismo →
<!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>
El problema con el primer ejemplo anterior es que hay que llamar a dos funciones para mostrar el resultado.
El problema con el segundo ejemplo es que no se puede evitar que la función de calculadora mostrando el resultado.
Ahora es el momento de devolver la llamada.
Una devolución de llamada es una función que se pasa como argumento a otra función.
Usando una devolución de llamada, puede llamar a la función de calculadora (myCalculator) con una devolución de llamada (myCallback), y deje que la función de la calculadora ejecute la devolución de llamada una vez finalizado el 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);Pruébelo usted mismo →
<!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>
En el ejemplo anterior, myDisplayer se llama función de devolución de llamada.
Se pasa a myCalculator() como un argumento.
Cuando pase una función como argumento, recuerde no utilizar paréntesis.
Derecha: miCalculadora(5, 5, miDisplayer);
Incorrecto: 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;
}Pruébelo usted mismo →
<!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>
En el ejemplo anterior, (x) => x >= 0 es una función de devolución de llamada.
Se pasa a removeNeg() como un argumento.
Los ejemplos anteriores no son muy interesantes.
Están simplificados para enseñarle la sintaxis de devolución de llamada.
Donde realmente brillan las devoluciones de llamada es en funciones asincrónicas, donde una función tiene que esperar a otra función (como esperar a que se cargue un archivo).
Las funciones asincrónicas se tratan en el siguiente capítulo.