The Event Loop and Timers

The Event Loop and Timers | JavaScript Course | SovranCode

COMPLETE LESSON · ABOUT 30 MIN OF ACTIVE PRACTICE

Learn The Event Loop and Timers step by step

Follow the lesson in order: understand the model, trace worked examples, run a controlled experiment, debug a faulty assumption, build independently, and verify your reasoning.

LESSON MAP

What you will understand and apply

Trace the synchronous stack before queued work
Treat timer delays as earliest eligible times
Split expensive work or move it off the main thread
Predict and verify execution order for synchronous logs, Promise reactions, microtasks, and timers.

DEEP EXPLANATION

Build the complete mental model

Build the mental model

Each execution agent runs one job at a time on a stack. Browser hosts coordinate tasks such as events and timers with microtasks such as Promise reactions. After a task completes, the microtask queue is drained before the browser can generally proceed to rendering and the next task. This explains ordering without describing asynchronous code as random. Before writing more syntax, name the values involved in The Event Loop and Timers, who creates them, and which result or effect the program promises. Trace the smallest example by hand and identify any browser or runtime API separately from the language feature. A useful mental model should predict a changed input, not merely describe the demonstration after it runs.

Use the API deliberately

setTimeout schedules a callback after at least the requested delay, not at an exact deadline. Busy synchronous work, nesting rules, background throttling, and other tasks can postpone it. setInterval can accumulate pressure when work takes too long; a recursive timeout can schedule the next step after the current one completes and supports clearer cancellation. During implementation, keep the microtask rule in a focused function or event boundary with explicit inputs. Choose names that reveal the domain, keep calculation separate from document, console, storage, or network effects, and prefer the narrowest API that expresses the problem. Compare this design with one reasonable alternative and explain why the selected construct makes ownership or control flow clearer.

Handle boundaries and tradeoffs

Long synchronous calculations block input and rendering because they occupy the main thread. Reduce the work, divide it across turns, use requestAnimationFrame for visual updates, requestIdleCallback only for deferrable work where supported, or move suitable computation into a Worker. Measure responsiveness instead of adding arbitrary timers. Verification for The Event Loop and Timers must cover an ordinary case, an empty or missing case, invalid input, and the most important threshold. Predict each result before running it, then locate the first value that violates the contract when reality differs. Record the corrected case as a repeatable check and explain which product behavior should occur instead of allowing undefined, NaN, stale data, or silent failure to spread.

WORKED EXAMPLES

Read the decision before the syntax

Example 1: Primary worked example

Trace this The Event Loop and Timers example from validated input to returned value or visible effect before editing it.

console.log("A: synchronous");
setTimeout(() => console.log("D: timer task"), 0);
queueMicrotask(() => console.log("C: queued microtask"));
Promise.resolve().then(() => console.log("B: promise microtask"));
console.log("A2: synchronous end");
await new Promise((resolve) => setTimeout(resolve, 20));

Example 2: Second worked example

This variation changes the shape of the problem so you can compare the underlying microtask contract instead of copying one solution.

function countdown(value, onTick) {
  let remaining = value;
  const tick = () => {
    onTick(remaining);
    remaining -= 1;
    if (remaining >= 0) setTimeout(tick, 100);
  };
  tick();
}
countdown(2, value => console.log("remaining", value));

How to trace this lesson

Write down the exact inputs used by The Event Loop and Timers.
Predict each returned value and observable effect before running the example.
Mark the first boundary where invalid or missing data could enter.
Verify the ordinary, empty, invalid, and threshold cases independently.

Common mistakes and corrections

A zero-millisecond timeout does not run immediately; it becomes eligible only after current work and microtasks allow another task.: Make the microtask rule explicit and cover it with a focused example.
Changing several parts of the example before explaining the original result.: Make one change at a time and compare it with a written prediction.
Testing only the demonstration's happy path.: Add missing, invalid, empty, and boundary inputs that exercise the stated contract.

PRACTICE LADDER

Move from recognition to independent work

1
Trace the synchronous stack before queued work
2
Treat timer delays as earliest eligible times
3
Split expensive work or move it off the main thread
4
Predict and verify execution order for synchronous logs, Promise reactions, microtasks, and timers.

Complete these in order. The final step should work without copying the lesson example; use the runner and lab below to test it.

Core rule

Applied boundary

RUNNABLE EXAMPLE

Change one assumption at a time

Predict the output, run the example, then change one input and one boundary in the The Event Loop and Timers example. Explain every changed result before continuing.

console.log("A: synchronous");
setTimeout(() => console.log("D: timer task"), 0);
queueMicrotask(() => console.log("C: queued microtask"));
Promise.resolve().then(() => console.log("B: promise microtask"));
console.log("A2: synchronous end");
await new Promise((resolve) => setTimeout(resolve, 20));

console.log("A: synchronous");
setTimeout(() => console.log("D: timer task"), 0);
queueMicrotask(() => console.log("C: queued microtask"));
Promise.resolve().then(() => console.log("B: promise microtask"));
console.log("A2: synchronous end");
await new Promise((resolve) => setTimeout(resolve, 20));

Press Run to execute your code.

DEBUGGING CHALLENGE

Locate the first incorrect value

Predict the failure and write your repair before revealing the explanation.

setTimeout(console.log("later"), 1000);

Reveal repair and explanation

setTimeout(() => console.log("later"), 1000);

setTimeout needs a callback; the broken version calls console.log immediately and passes its result.

INDEPENDENT LAB

Build without copying the example

Predict and verify execution order for synchronous logs, Promise reactions, microtasks, and timers.

// Define small functions before composing the complete solution.
// Predict and verify execution order for synchronous logs, Promise reactions, microtasks, and timers.

// Define small functions before composing the complete solution.
// Predict and verify execution order for synchronous logs, Promise reactions, microtasks, and timers.

Press Run to execute your code.

Self-review checklist Trace the synchronous stack before queued work Treat timer delays as earliest eligible times Split expensive work or move it off the main threadWhat did you predict, observe, and change?

KNOWLEDGE CHECK

Explain the rule, not only the syntax

1. When do Promise reactions normally run relative to the next timer task? During the microtask checkpoint first Only after every timer Synchronously before the current stack

2. Which evidence best demonstrates mastery of The Event Loop and Timers? A prediction, boundary tests, and an explained result A copied snippet with no changes One successful happy-path run

Loading saved work…

Code and answers save automatically. Guest work stays on this device; signed-in work syncs to your account. The runner is isolated, blocks network access, and stops long-running console programs.

1. JavaScript Foundations

2. Functions and Collections

3. Objects and Structured Data

4. Browser Interfaces

5. Async and Reliable Applications

6. Application Engineering