LearnViz CompSci
Home / Learn / Web Development / Event Loop

Intermediate Topic 20 of 51 Web Development

Event Loop

Mechanism scheduling callbacks and microtasks in JavaScript.

How it works

The event loop is the mechanism that lets single-threaded JavaScript handle asynchronous work. Synchronous code runs on the call stack; when asynchronous operations such as timers, network calls and user events finish, their callbacks are queued. The loop takes the next task from the task queue whenever the stack is empty, and after each task runs all microtasks, such as promise callbacks, before rendering and moving on. Web APIs and Node's libuv perform work outside the main thread.

Step-by-step walkthrough

  1. Synchronous code runs on the call stack.
  2. Timers and fetch are handled by Web APIs.
  3. When done their callbacks go to the task queue.
  4. After the stack empties, microtasks such as promise callbacks run first.
  5. Then the loop takes the next task, so setTimeout 0 runs after promises.

Where it is used

Understanding it explains why setTimeout with zero delay runs after current code, why long scripts freeze the page and the order of logs from promises and timers.

Common pitfall

Blocking the stack with heavy loops prevents rendering and event handling; split work into chunks, use requestIdleCallback or move it to Web Workers. Microtask loops can starve the loop. Timers are not exact. Ordering assumptions between timers, promises and I/O differ across environments, so test them.

Where it fits in the course

Event Loop is topic 20 of 51 in Web Development, rated Intermediate. It follows Promises. The next topic is ES Modules.

Practice and explore

How to study this topic

  1. Read the explanation above and restate the definition in your own words.
  2. Open the interactive lesson and answer its mini quiz.
  3. Read the common pitfall, then write a short example that avoids it.
  4. Check your understanding in the Web Development quiz, and revisit the topic if you miss a question.

Frequently asked questions

What is Event Loop?
Mechanism scheduling callbacks and microtasks in JavaScript. It belongs to Web Development and is an intermediate-level topic.
Where do people use Event Loop?
Understanding it explains why setTimeout with zero delay runs after current code, why long scripts freeze the page and the order of logs from promises and timers.
What is the most common mistake with Event Loop?
Blocking the stack with heavy loops prevents rendering and event handling; split work into chunks, use requestIdleCallback or move it to Web Workers.
What should I learn before this topic?
Start with Promises, the topic just before it in Web Development.
How can I practice it?
Answer the mini quiz in the interactive lesson, then take the Web Development quiz.
Is Event Loop hard to learn?
It is an Intermediate topic. Be comfortable with the Beginner topics in this area first, then read the common pitfall carefully, since it is where most mistakes happen.
How long does it take to learn Event Loop?
Most learners can read the explanation and finish the interactive lesson in under an hour. Fluency comes from applying the idea, so plan a few short practice sessions with the quiz.
Which topics are related to Event Loop?
Promises, ES Modules, Asynchronous JavaScript are closely connected. The full list is in the related topics section of this page.
What should I study after Event Loop?
Continue with ES Modules, the next topic in Web Development.

Related topics