Funciones callback
La taza es un párrafo, #cup, y empieza como blank. En esta página no hay temporizador de hervidor.
serve toma un pedido y una función. Esa función es el callback: la entregas y serve la llama. La llamada ocurre antes de que serve vuelva, así que la línea siguiente ya ve la bebida. La línea queda lida tea / poured.
No es el hervidor
La página anterior anotó cold al instante y hot solo después de 400 milisegundos. Su línea era cold / hot / 3. Un temporizador espera. serve no espera. Si buscas setTimeout, este es el mostrador equivocado.
La pregunta: ¿quién llama a la función que entregaste?
El nombre del parámetro es solo un nombre
Dentro de serve el parámetro se llama done. En el lugar de la llamada la función no tiene nombre. A serve no le importa el nombre. Le importa haber recibido una función y llamarla con un argumento: el pedido más la palabra tea.
La llamada ocurre antes del regreso
done(order + " tea") corre, la taza se llena y solo entonces termina serve. El registro bajo la llamada ya es la bebida.
function serve(order, done) {
done(order + " tea");
}
let cup = document.getElementById("cup");
serve("lida", function (drink) {
cup.textContent = drink;
});
console.log(cup.textContent);
El registro es lida tea. La taza no se quedó blank y nada esperó.
Olvidar la llamada
Este serve arma la bebida y se detiene. Nunca llama a done. La función que entregaste se queda quieta. La taza se puso en blank antes de la llamada y sigue blank.
function serve(order, done) {
order = order + " tea";
}
let cup = document.getElementById("cup");
cup.textContent = "blank";
serve("lida", function (drink) {
cup.textContent = drink;
});
console.log(cup.textContent);
El registro es blank. No se lanza ningún error. Un callback que nunca se llama simplemente no corre. La cadena de la bebida se armó y nadie la recibió.
Una segunda función, después de la primera
serve puede tomar dos funciones. Llama primero a done con la bebida. Llama a after solo cuando esa llamada ya volvió. after no recibe la bebida. Solo marca que se sirvió.
function serve(order, done, after) {
done(order + " tea");
after();
}
let seen = [];
serve(
"lida",
function (drink) {
seen.push(drink);
},
function () {
seen.push("poured");
}
);
console.log(seen.join(" / "));
El registro es lida tea / poured. Si cambias las dos llamadas dentro de serve, las palabras cambian. El orden es el de las llamadas, no el orden en que escribiste las expresiones de función.
Qué junta la página
La página usa el segundo serve, el de done y after. Empuja la bebida, luego poured, y escribe la línea. No hay retraso entre ellas.
La línea bajo la taza
El script está al final de body. serve llama a las dos funciones antes de unir la línea.
<!DOCTYPE html>
<html>
<head>
<title>serve-cup — page</title>
</head>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
function serve(order, done, after) {
done(order + " tea");
after();
}
let seen = [];
serve(
"lida",
function (drink) {
seen.push(drink);
},
function () {
seen.push("poured");
}
);
document.getElementById("line").textContent = seen.join(" / ");
document.getElementById("cup").textContent = seen[0];
</script>
</body>
</html>
La línea es lida tea / poured. La taza muestra lida tea. La palabra blank ya no está. cold / hot / 3 es la página anterior.
En el mostrador
- Entrega una función a
servey deja que la llame con la bebida. El registro es lida tea. - Usa un
serveque nunca llama adone. El registro se queda en blank. - Entrega
doneyafter. El registro es lida tea / poured. - Lee la línea de la página: lida tea / poured.
Fallos en el mostrador
La taza muestra una bebida o se queda blank. No muestra una cuenta de intervalo.
- Esperar que el registro bajo
servesiga blank aunquedonefue llamada - Creer que un callback corre aunque
servenunca lo llame - Esperar 400 milisegundos por lida tea
- Poner poured antes de la bebida llamando primero a
after - Leer la línea como cold / hot / 3
Quédate con esto
- Un callback es una función que entregas para que otro la llame
servellama adoneantes de volver, así que la línea siguiente ya ve lida tea- Si
donenunca se llama, la taza sigue blank y no hay error aftercorre solo después de quedonevuelve- La línea de la página es lida tea / poured
🧠 Pon a Prueba tu Conocimiento
Pon a Prueba tu Conocimiento
Ponte a prueba con este cuestionario interactivo y descubre qué tan bien entiendes el tema
📝 Instrucciones
- Lee cada pregunta cuidadosamente
- Selecciona la mejor respuesta para cada pregunta
- Puedes repetir el quiz tantas veces como quieras
- Tu progreso se mostrará en la parte superior