Loading...

JavaScript Timing

The kettle is a paragraph, #pot. The script writes cold into it. Nothing here is a form, and nothing here is the shop bell.
A timer does not pause the script. The next line runs at once. The callback runs later. A timeout of 400 milliseconds writes hot. Cancel it and the kettle stays cold. An interval counts 1, 2, 3 and then stops. The line reads cold / hot / 3.

Not the bell

The previous page joined same / 4 / undefined / number. That was window.document, a var, a let, and the type of the width. This page does not read those. cold and hot are words the timer writes on the kettle.
The new question is when the word changes.

The next line does not wait

setTimeout asks for a function and a delay in milliseconds. 400 is four tenths of a second, not 400 seconds. The log under the call runs first, while the kettle is still cold. The callback writes hot and logs that later.

Hot arrives later

javascript 
let pot = document.getElementById("pot");
pot.textContent = "cold";
setTimeout(function () {
pot.textContent = "hot";
console.log(pot.textContent);
}, 400);
console.log(pot.textContent);

The first log is cold. The later log is hot. The script did not sit still for 400 milliseconds.

Cancel the boil

setTimeout returns an id. clearTimeout with that id drops the callback. The kettle was set to cold, and hot never arrives.

Cancel before it boils

javascript 
let pot = document.getElementById("pot");
pot.textContent = "cold";
let boil = setTimeout(function () {
pot.textContent = "hot";
}, 400);
clearTimeout(boil);
console.log(pot.textContent);

The log is cold. The callback was dropped, so the kettle does not become hot.

Count three pours

setInterval calls the function again and again, here every 300 milliseconds. Each call adds one. At 3, clearInterval stops it. The log is that 3, not an endless climb.

Stop at three

javascript 
let pot = document.getElementById("pot");
let n = 0;
let tick = setInterval(function () {
n = n + 1;
pot.textContent = String(n);
if (n === 3) {
clearInterval(tick);
console.log(pot.textContent);
}
}, 300);

The log is 3. The interval id is tick. Without clearInterval, the count would keep rising.

The id is a number

The value setTimeout returns is a number. It is not the delay, and it is not the word hot. This snippet schedules an empty callback only to read the type, then cancels it so nothing else runs.

The timer id

javascript 
let boil = setTimeout(function () {}, 400);
console.log(typeof boil);
clearTimeout(boil);

The log is number.

Zero is still later

A delay of 0 does not mean “before the next line.” The callback waits until this script finishes. The kettle is set to now, that word is logged, and only then does the callback log later.

A delay of zero

javascript 
let pot = document.getElementById("pot");
pot.textContent = "now";
setTimeout(function () {
console.log("later");
}, 0);
console.log(pot.textContent);

The first log is now. The second log is later. Zero did not jump the queue.

What a delay means

The unit is milliseconds. The kettle row is the one this page uses.

📊 What a delay means

Delay It means Easy to mix up
0 after this script finishes before the next line
400 0.4 seconds 400 seconds
1000 one second one minute

The line under the kettle

The script writes cold and stores that word at once. The timeout of 400 milliseconds stores hot. The interval adds one every 300 milliseconds, stops at 3, and then joins the three words. Hot is stored before the third pour, because 400 is less than 900.

Page demo — kettle timer

html 
<!DOCTYPE html>
<html>
<head>
<title>kettle-timer — page</title>
</head>
<body>
<p id="pot">blank</p>
<p id="line">…</p>
<script>
let pot = document.getElementById("pot");
let seen = [];
pot.textContent = "cold";
seen.push(pot.textContent);
setTimeout(function () {
pot.textContent = "hot";
seen.push("hot");
}, 400);
let n = 0;
let tick = setInterval(function () {
n = n + 1;
if (n === 3) {
clearInterval(tick);
seen.push(String(n));
document.getElementById("line").textContent = seen.join(" / ");
}
}, 300);
</script>
</body>
</html>

The line reads cold / hot / 3. Cold was immediate. Hot came from the timeout. 3 came from the interval. The word blank is gone. same / 4 / undefined / number is the previous page.

At the counter

  1. Set the kettle to cold, schedule hot for 400 milliseconds, and log at once. The first log is cold. The later log is hot.
  2. Schedule hot, then clearTimeout before it runs. The log stays cold.
  3. Count with setInterval and stop at 3. The log is 3.
  4. Read typeof of the id. The log is number.
  5. Use a delay of 0. The logs are now, then later.
  6. Read the page line: cold / hot / 3.

Misses at the counter

The kettle shows cold, hot, or a count. It does not show the bell’s line.

  • Expecting the first log to be hot
  • Forgetting clearTimeout, so a cancelled boil still writes hot
  • Letting the interval run past 3
  • Reading 400 as 400 seconds
  • Treating a delay of 0 as “before the next line”
  • Reading the line as same / 4 / undefined / number

Keep this

  • The next line runs before the timeout callback
  • clearTimeout drops that callback, and the kettle stays cold
  • clearInterval stops the count at 3
  • The id from setTimeout is a number
  • A delay of 0 still logs now before later
  • The page line reads cold / hot / 3

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

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

❓
7
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 56 of 58
Javascript Tutorial