JS इवेंट लूप

Event Loop क्या है?

Event loop JavaScript को asynchronous काम संभालने में मदद करता है जबकि main thread उपलब्ध रहती है।

यह JavaScript को एक साथ single-threaded और non-blocking दोनों रहने देता है — लंबे समय तक चलने वाला I/O page को freeze नहीं करता, क्योंकि उसे main synchronous flow के बाहर संभाला जाता है।

उदाहरण: What Is the Event Loop?

console.log("1");
setTimeout(() => console.log("2"), 0);
console.log("3"); // 1, 3, 2 - main thread finishes first

Call Stack

JavaScript synchronous function calls को call stack पर चलाता है। call stack के पूरी तरह खाली होने पर ही event loop किसी queue से अगला task निकालकर उसे चलाने के लिए stack पर push करता है।

उदाहरण: Call Stack

// Define the function `a` with no parameters
// Define the function `a` with no parameters
function a() { b(); }
// Define the function `b` with no parameters
// Define the function `b` with no parameters
function b() { console.log("on the call stack"); }
// Call `a()`
// Call `a()`
a();

Task Queue

Timer callbacks और कई browser callbacks event loop के उन्हें चलाने से पहले queues में इंतज़ार करते हैं। ये queued callbacks तुरंत नहीं चलते, 0ms delay के साथ भी नहीं — वे पहले current synchronous code के खत्म होने और call stack के साफ होने का इंतज़ार करते हैं।

उदाहरण: Task Queue

console.log("start");
setTimeout(() => console.log("from queue"), 0);
console.log("end"); // queued callback waits for the stack to clear

Microtasks

Promise callbacks microtasks होते हैं। ये आमतौर पर current code खत्म होने के बाद timer callbacks से पहले चलते हैं।

चूंकि अगले task queue item के चलने से पहले microtasks को पूरी तरह drain किया जाता है, resolved Promises की एक chain एक setTimeout(fn, 0) callback से पहले चल सकती है, एक tick बाद भी।

उदाहरण: Microtasks

// Print "1" to the console
// Print "1" to the console
console.log("1");
// Call `Promise.resolve().then(() => console.log("2 - microtask"))`
// Call `Promise.resolve().then(() => console.log("2 - microtask"))`
Promise.resolve().then(() => console.log("2 - microtask"));
// Call `setTimeout(() => console.log("3 - timer"), 0)`
// Call `setTimeout(() => console.log("3 - timer"), 0)`
setTimeout(() => console.log("3 - timer"), 0);
// Print "4" to the console
// Print "4" to the console
console.log("4");

Practical क्रम

execution order समझना आपको asynchronous JavaScript के output का अंदाज़ा लगाने में मदद करता है। यह क्रम उस output को समझाता है जो पहली नज़र में हैरान करने वाला लगता है, जैसे code में पहले schedule किए गए किसी setTimeout से पहले एक Promise handler का log होना।

उदाहरण: Practical Order

console.log("A");
setTimeout(() => console.log("B - timer"), 0);
Promise.resolve().then(() => console.log("C - microtask"));
console.log("D");
// Order: A, D, C, B