Callbacks de JavaScript

"¡Llamaré más tarde!"

El callback (callback) es una función que se pasa como parámetro a otra función

Esta técnica permite que una función llame a otra función

Las funciones de callback pueden ejecutarse después de que otra función se complete

Secuencia de funciones

Las funciones JavaScript se ejecutan en el orden en que se llaman, no en el orden en que se definen.

Este ejemplo finalmente mostrará "Goodbye":

ejemplo

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
myFirst();
mySecond();

Pruebe usted mismo

Este ejemplo finalmente mostrará "Hello":

ejemplo

function myFirst() {
  myDisplayer("Hello");
}
function mySecond() {
  myDisplayer("Goodbye");
}
mySecond();
myFirst();

Pruebe usted mismo

Control de secuencia

A veces, desea tener un mejor control sobre cuándo ejecutar la función.

Supongamos que desea realizar un cálculo y luego mostrar el resultado.

Puede llamar a la función del calculador (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);

Pruebe usted mismo

O, puede llamar a la función del calculador (myCalculator)，y luego hacer que la función del calculador 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);

Pruebe usted mismo

El problema del primer ejemplo es que debe llamar a dos funciones para mostrar el resultado.

El problema del segundo ejemplo es que no puede evitar que la función del calculador muestre el resultado.

Es el momento de introducir el callback.

Callbacks de JavaScript

Un callback es una función que se pasa como parámetro a otra función.

Usando el callback, puede llamar a la función del calculador a través del callback：myCalculator），y luego, una vez completado el cálculo, ejecutar la función de callback del calculador：

ejemplo

function myDisplayer(some) {
  document.getElementById("demo").innerHTML = some;
}
function myCalculator(num1, num2, myCallback) {
  let sum = num1 + num2;
  myCallback(sum);
}
myCalculator(5, 5, myDisplayer);

Pruebe usted mismo

En el ejemplo anterior, myDisplayer es el nombre de la función.

Se transmite como parámetro a myCalculator().

Recuerde no usar paréntesis cuando transmita una función como parámetro.

Correcto: myCalculator(5, 5, myDisplayer);

Error: myCalculator(5, 5, myDisplayer());

¿Cuándo usar llamadas de retorno?

El ejemplo anterior no es muy emocionante.

Se han simplificado para explicar la sintaxis de las llamadas de retorno.

La verdadera gloria de las llamadas de retorno es la función asincrónica, en la que una función debe esperar a que otra función se complete (por ejemplo, esperar a que se cargue un archivo).

El siguiente capítulo presentará funciones asincrónicas.