Macrotasks — Complete Guide
Macrotasks — Complete Guide: free step-by-step lesson with examples, common mistakes, and interview tips — part of JavaScript Tutorial on Toolliyo Academy.
On this page
JavaScript Tutorial · Lesson 49 of 100
Macrotasks
Basics ✓ → Objects & data ✓ → Async & DOM → Advanced → Tools → Projects
Intermediate · 3 — Async & DOM · ~6 min · JS Async JavaScript
What is this?
Macrotasks include setTimeout, setInterval, and I/O callbacks. The event loop runs one macrotask per turn after microtasks.
Why should you care?
Timers and user events are macrotasks — understanding order prevents race bugs.
See it live — copy this example
Paste into an HTML file or the browser console (F12). Use Run below when the live editor is available.
setTimeout(() => console.log("macro 1"), 0);
setTimeout(() => console.log("macro 2"), 0);
Promise.resolve().then(() => console.log("micro"));Run Example »
Edit the code below and click Run to see the result in Toolliyo’s live editor.
What happened?
- Microtask logs before both timeouts, even at 0ms delay.
Practice next
- Run two setTimeout(0) plus one Promise and predict order.
- Add setInterval and clear with clearInterval.
- Compare requestAnimationFrame timing.
- Put setTimeout inside setTimeout and log nested macro turn order.
- Use setTimeout to defer heavy work in chunks across multiple macrotasks.
Remember
setTimeout = macrotask One macrotask per loop turn After microtasks drain
ScriptVerse heartbeat
A macrotask setInterval pings server health every 60s while promise microtasks handle responses.
Outcome: Separating macro vs micro work avoids starving clicks and scroll during background polling.
Interview prep for this lesson
Practice these questions aloud after reading—each links to a full structured answer.
Sign in to ask a question or upvote helpful answers.
No questions yet — be the first to ask!
