Funções callback
A xícara é um parágrafo, #cup, e começa como blank. Nesta página não há temporizador da chaleira.
serve recebe um pedido e uma função. Essa função é o callback: entregas e serve chama. A chamada acontece antes de serve voltar, por isso a linha seguinte já vê a bebida. A linha fica lida tea / poured.
Não é a chaleira
A página anterior registou cold na hora e hot só depois de 400 milissegundos. A linha dela era cold / hot / 3. Um temporizador espera. serve não espera. Se procuras setTimeout, este balcão não é o teu.
A pergunta: quem chama a função que entregaste?
O nome do parâmetro é só um nome
Dentro de serve o parâmetro chama-se done. No lugar da chamada a função não tem nome. serve não liga ao nome. Liga a ter recebido uma função e a chamá-la com um argumento: o pedido mais a palavra tea.
A chamada acontece antes do regresso
done(order + " tea") corre, a xícara enche-se, e só então serve acaba. O registo por baixo da chamada já é a bebida.
function serve(order, done) {
done(order + " tea");
}
let cup = document.getElementById("cup");
serve("lida", function (drink) {
cup.textContent = drink;
});
console.log(cup.textContent);
O registo é lida tea. A xícara não ficou blank e nada esperou.
Esquecer a chamada
Este serve monta a bebida e para. Nunca chama done. A função que entregaste fica quieta. A xícara foi posta em blank antes da chamada e continua 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);
O registo é blank. Nenhum erro é lançado. Um callback que nunca é chamado simplesmente não corre. A cadeia da bebida foi montada e ninguém a recebeu.
Uma segunda função, depois da primeira
serve pode receber duas funções. Chama primeiro done com a bebida. Só chama after quando essa chamada já voltou. after não recebe a bebida. Só marca que o serviço aconteceu.
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(" / "));
O registo é lida tea / poured. Se trocares as duas chamadas dentro de serve, as palavras trocam. A ordem é a das chamadas, não a ordem em que escreveste as expressões de função.
O que a página junta
A página usa o segundo serve, o de done e after. Empurra a bebida, depois poured, e escreve a linha. Não há atraso entre elas.
A linha sob a xícara
O script fica no fim de body. serve chama as duas funções antes de juntar a linha.
<!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>
A linha é lida tea / poured. A xícara mostra lida tea. A palavra blank sumiu. cold / hot / 3 é a página anterior.
No balcão
- Entrega uma função a
servee deixa-o chamá-la com a bebida. O registo é lida tea. - Usa um
serveque nunca chamadone. O registo fica blank. - Entrega
doneeafter. O registo é lida tea / poured. - Lê a linha da página: lida tea / poured.
Erros no balcão
A xícara mostra uma bebida ou fica blank. Não mostra uma conta de intervalo.
- Esperar que o registo sob
servecontinue blank mesmo comdonechamado - Achar que um callback corre mesmo se
servenunca o chamar - Esperar 400 milissegundos por lida tea
- Pôr poured antes da bebida chamando
afterprimeiro - Ler a linha como cold / hot / 3
Fique com isto
- Um callback é uma função que entregas para outro chamar
servechamadoneantes de voltar, por isso a linha seguinte já vê lida tea- Se
donenunca é chamado, a xícara fica blank e não há erro aftersó corre depois dedonevoltar- A linha da página é lida tea / poured
🧠 Teste Seu Conhecimento
Teste Seu Conhecimento
Desafie-se com este questionário interativo e veja o quão bem você entende o tópico
📝 Instruções
- Leia cada pergunta cuidadosamente
- Selecione a melhor resposta para cada pergunta
- Você pode refazer o quiz quantas vezes quiser
- Seu progresso será mostrado no topo