Loading...

JavaScript Callbacks

The cup is a paragraph, #cup, and it starts as blank. There is no kettle timer on this page.
serve takes an order and a function. That function is the callback: you hand it over, and serve calls it. Here the call happens before serve returns, so the next line already sees the drink. The line reads lida tea / poured.

Not the kettle

The previous page logged cold at once and hot only after 400 milliseconds. Its line was cold / hot / 3. A timer waits. serve does not. If you are looking for setTimeout, this is the wrong counter.
The question is who calls the function you passed.

The parameter is only a name

Inside serve the parameter is called done. At the call site the function has no name. serve does not care about the name. It cares that it received a function, and that it calls that function with one argument: the order plus the word tea.

The call happens before the return

done(order + " tea") runs, the cup is set, and only then does serve finish. The log under the call is already the drink.

Hand over a function

javascript 
function serve(order, done) {
done(order + " tea");
}
let cup = document.getElementById("cup");
serve("lida", function (drink) {
cup.textContent = drink;
});
console.log(cup.textContent);

The log is lida tea. The cup did not stay blank, and nothing waited.

Forget the call

This serve builds the drink and then stops. It never calls done. The function you handed over just sits there. The cup was set to blank before the call, and it stays blank.

Never call done

javascript 
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);

The log is blank. No error is thrown. A callback that is never called simply does not run. The drink string was built and then thrown away, because nothing received it.

A second function, after the first

serve can take two functions. It calls done first, with the drink. It calls after only once that call has returned. after does not receive the drink. It only marks that the pour happened.

Done, then after

javascript 
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(" / "));

The log is lida tea / poured. Swap the two calls inside serve and the words swap. The order is the order of the calls, not the order you wrote the function expressions.

What the page joins

The page uses the second serve, the one with done and after. It pushes the drink, then poured, and writes the line. There is no delay between them.

The line under the cup

The script sits at the end of the body. serve calls both functions before the join.

Page demo — the cup

html 
<!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>

The line reads lida tea / poured. The cup shows lida tea. The word blank is gone. cold / hot / 3 is the previous page.

At the counter

  1. Pass a function to serve and let serve call it with the drink. The log is lida tea.
  2. Use a serve that never calls done. The log stays blank.
  3. Pass done and after. The log is lida tea / poured.
  4. Read the page line: lida tea / poured.

Misses at the counter

The cup shows a drink, or it stays blank. It does not show a count from an interval.

  • Expecting the log under serve to still be blank when done was called
  • Thinking a callback runs even if serve never calls it
  • Waiting 400 milliseconds for lida tea
  • Putting poured before the drink by calling after first
  • Reading the line as cold / hot / 3

Keep this

  • A callback is a function you pass so someone else can call it
  • serve calls done before it returns, so the next line already sees lida tea
  • If done is never called, the cup stays blank and no error is thrown
  • after runs only after done returns
  • The page line reads lida tea / poured

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
6
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 57 of 58
Javascript Tutorial