JavaScript একটি single thread-এ চলে — এটি একবারে শুধু একটা কাজ করতে পারে। তবুও একটি পেজ একই সাথে একটি network request, একটি timer, আর একটি click handler-এর জন্য অপেক্ষা করতে পারে, freeze না হয়েই। Event loop সেই mechanism যা এটা সম্ভব করে।
প্রতিটি function call call stack-এ push হয়, আর return করলে pop হয়ে যায়। JavaScript stack-এর উপরে যা আছে শুধু সেটাই চালায়।
function greet() {
console.log('Hello')
}
greet()
// greet() push হয়, চলে, তারপর pop হয়setTimeout-এর মতো একটি function এর callback call stack-এ না, browser-এর হাতে দেয় — call stack বাকি script অবিলম্বে চালাতে থাকার জন্য মুক্ত থাকে।
console.log('1')
setTimeout(() => console.log('2'), 0)
console.log('3')
// Output: 1, 3, 2 — 0ms delay দিয়েও,
// callback call stack খালি না হওয়া পর্যন্ত অপেক্ষা করেএকটি timer, network request, বা event fire হলে, এর callback সরাসরি call stack বাধা দেয় না — এটি একটি queue-তে অপেক্ষা করে। Event loop-এর কাজ সহজ: call stack খালি কিনা check করে, খালি হলে, queue-তে পরের callback-টা এর উপর move করে।
প্রতিটি queue হওয়া callback সমানভাবে treat হয় না। Promise callback একটি microtask queue-তে যায়, যা event loop macrotask queue (setTimeout, setInterval, DOM event) স্পর্শ করার আগে সবসময় পুরোপুরি খালি করে।
console.log('1')
setTimeout(() => console.log('2 — macrotask'), 0)
Promise.resolve().then(() => console.log('3 — microtask'))
console.log('4')
// Output: 1, 4, 3, 2 — পরের macrotask-এর আগে microtask সবসময় চলে| Queue | উদাহরণ | অগ্রাধিকার |
|---|---|---|
| Microtask | Promise .then()/.catch(), async/await continuation | পরের macrotask-এর আগে পুরোপুরি খালি হয় |
| Macrotask | setTimeout, setInterval, DOM event, I/O | প্রতি event loop cycle-এ একটা চলে |
Interactively practice করুন
এই সাইটের Event Loop tool (Tools-এর নিচে) একটি কোডের জন্য call stack, task queue, আর microtask queue ধাপে ধাপে animate করে — শুধু ordering rule পড়ার চেয়ে intuition তৈরির অনেক দ্রুত উপায়।