Devoluciones de llamada de JavaScript
"¡Llamaré después!"
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 puede ejecutarse después de que otra función haya finalizado
Secuencia de función
Las funciones de JavaScript se ejecutan en la secuencia en que se llaman. No en la secuencia en que se definen.
Este ejemplo terminará mostrando "Adiós":
Ejemplo
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
myFirst();
mySecond();
Este ejemplo terminará mostrando "Hola":
Ejemplo
function myFirst() {
myDisplayer("Hello");
}
function
mySecond() {
myDisplayer("Goodbye");
}
mySecond();
myFirst();
Control de secuencia
A veces le gustaría tener un mejor control sobre cuándo ejecutar una función.
Suponga que desea hacer un cálculo y luego mostrar el resultado.
Puede llamar a una función de calculadora ( myCalculator
), guardar el resultado y luego llamar a otra función ( myDisplayer
) para mostrar el resultado:
Ejemplo
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);
O bien, puede llamar a una función de calculadora ( myCalculator
) y dejar que la función de calculadora llame a la función de visualización ( myDisplayer
):
Ejemplo
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2) {
let sum = num1 + num2;
myDisplayer(sum);
}
myCalculator(5, 5);
El problema con el primer ejemplo anterior es que debe llamar a dos funciones para mostrar el resultado.
El problema con el segundo ejemplo es que no puede evitar que la función de calculadora muestre el resultado.
Ahora es el momento de traer una devolución de llamada.
Devoluciones de llamada de JavaScript
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 y dejar que la función de calculadora ejecute la devolución de llamada después de que finalice el cálculo:
Ejemplo
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
En el ejemplo anterior, myDisplayer
es el nombre de una función.
Se pasa a myCalculator()
como un argumento.
Cuando pase una función como argumento, recuerde no usar paréntesis.
Derecha: myCalculator(5, 5, myDisplayer);
Incorrecto: miCalculadora(5, 5, miPantalla());
¿Cuándo usar una devolución de llamada?
Los ejemplos anteriores no son muy emocionantes.
Se simplifican para enseñarle la sintaxis de devolución de llamada.
Donde realmente brillan las devoluciones de llamadas es en las funciones asincrónicas, donde una función tiene que esperar a que otra función (como esperar a que se cargue un archivo).
Las funciones asincrónicas se tratan en el siguiente capítulo.