Event loop-এর ছবি: একটা thread, একটা stack আর দুটো queue

Rafi একটা quiz app বানাচ্ছে। Student "Submit" চাপলে ও চায় সাথে সাথে একটা message আসুক, তারপর নম্বর দেওয়া শুরু হোক। তাই ও লেখে setTimeout(showMessage, 0), ভাবে শূন্য মানে "এখনই"। তারপর নম্বর দেওয়ার loop চলে, আর message আসে সেটা শেষ হওয়ার পরে। শূন্য millisecond-এর timer পুরো সময়টা বসে ছিল।

Rafi-র timer নষ্ট হয়নি। JavaScript যা কথা দেয়, timer ঠিক তাই করেছে। একটা timer-এর callback চলতে থাকা code-এর মাঝে কখনো ঢুকে পড়ে না। Stack খালি হওয়া পর্যন্ত সে অপেক্ষা করে, তারপর event loop তাকে চালাতে দেয়। এই module সেই loop নিয়ে। একবার ছবিটা চোখে ভাসলে যেকোনো async program-এর print-এর ক্রম আর অবাক করবে না।

একটা thread, একটা call stack

JavaScript তোমার code চালায় একটাই thread-এ। Thread মানে কাজের একটা লাইন: একটা কাজ করে, তারপর পরেরটা। তোমার program-এ দ্বিতীয় কোনো কর্মী নেই, যে তোমার loop ব্যস্ত থাকার সময় timer-এর callback চালিয়ে দেবে।

ওই একটা thread একটা call stack রাখে। Module 5-এ দেখেছ: প্রতিটা function call একটা frame চাপায়, প্রতিটা return একটা frame নামায়। Main script নিজেই সবচেয়ে নিচের frame। Stack-এ কিছু থাকা মানেই thread ব্যস্ত।

const start = Date.now();
setTimeout(() => {
  const waited = Date.now() - start;
  console.log("timer ran, waited 200 ms or more:", waited >= 200);
}, 0);
let spins = 0;
while (Date.now() - start < 200) spins++;
console.log("loop done");

loop done
timer ran, waited 200 ms or more: true

Timer চেয়েছিল 0 ms। কিন্তু loop 200 ms ধরে stack আটকে রাখল, তাই আগে print হলো "loop done"। তারপরেই timer-এর callback চলল, আর দ্বিতীয় লাইনটা বলছে সে পুরো 200 ms অপেক্ষা করেছে।

অপেক্ষার কাজটা করে host

JavaScript-এর thread যদি একটাই হয়, millisecond গোনে কে? তোমার code না। গোনে host: যে program JavaScript চালায়। Browser-এ host হলো browser নিজে; আমাদের Playground আর server-এ host হলো Node.js।

Host কিছু API দেয়, যেগুলো কোনো কিছুর জন্য অপেক্ষা করে: timer, file পড়া, network-এর উত্তর, click। Browser-এ এদের বলে Web APIs। Node-এর নিজের আলাদা সেট আছে। তুমি setTimeout(cb, 100) ডাকলে cb-কে host-এর হাতে তুলে দাও, আর নিয়ন্ত্রণ সাথে সাথে ফিরে পাও। setTimeout নিজে প্রায় কোনো সময়ই নেয় না।

console.log("before");
const id = setTimeout(() => console.log("callback"), 100);
console.log("setTimeout returned, the timer id is an object:", typeof id === "object");
console.log("after");

before
setTimeout returned, the timer id is an object: true
after
callback

setTimeout সাথে সাথে একটা timer id দিয়ে ফিরে আসে, আর script চলতে থাকে। Node-এ ওই id একটা object; browser-এ একটা সংখ্যা। Lesson 02-এ এই id দিয়ে timer বাতিল করা দেখবে।

Task queue

Host-এর timer শেষ হলেও callback সাথে সাথে চলতে পারে না, কারণ stack তখন ব্যস্ত থাকতে পারে। তাই সে একটা লাইনে দাঁড়ায়: task queue, যাকে macrotask queue বা callback queue-ও বলে। Timer, শেষ হওয়া file read, click event, সবাই ওখানে অপেক্ষা করে। যে আগে আসে, সে আগে যায়।

Task মানে ওই queue থেকে নেওয়া একটা callback, যেটা শুরু থেকে শেষ পর্যন্ত একটানা চলে। কোনো task-কে মাঝপথে কেউ থামায় না। একে বলে "run to completion" নিয়ম, আর এজন্যই Rafi-র loop-এর মাঝে কেউ ঢুকতে পারেনি।

Microtask queue

আরেকটা ছোট লাইন আছে, যার অগ্রাধিকার বেশি: microtask queue। queueMicrotask(cb) দিয়ে সেখানে একটা callback রাখা যায়। Promise-এর .then(cb)-ও তার callback সেখানেই রাখে। Promise ঠিকঠাক শিখবে Module 13-এ; এখানে একটা then মানে শুধু "একটা microtask"।

অগ্রাধিকারের নিয়মটা এরকম: প্রতিটা task-এর পরে, আর main script-এর পরে, loop পরের task নেওয়ার আগে সব microtask চালিয়ে ফেলে। কাজ চলার সময় অন্য microtask নতুন যেগুলো রাখে, সেগুলোও এর মধ্যে পড়ে।

Loop: এক নিয়ম, তিন ধাপ

এবার পুরো ছবিটা তিনটা ধাপে এঁটে যায়, যেগুলো বারবার ঘোরে:

1. চলতি task চালাও, যতক্ষণ না stack খালি হয়। প্রথম task হলো main script।
2. সব microtask চালাও, পুরনোটা আগে, যতক্ষণ না microtask queue খালি হয়।
3. Task queue-তে কিছু থাকলে সবচেয়ে পুরনো task-টা নাও, তারপর আবার ধাপ 1।

এটাই event loop। দুটো queue খালি, আর host-এর কাছে কোনো timer বা read বাকি নেই, এমন হলে Node-এর আর অপেক্ষার কিছু থাকে না, program শেষ হয়।

বিখ্যাত puzzle-টার ওপর loop-টা চলতে দেখো। Widget-টা program-টা আসল timer আর আসল microtask দিয়ে চালায়, আর প্রতিটা মুহূর্ত লিখে রাখে। নিচে program-এর নিজের output আসে, লাইন ধরে, ঠিক যে ক্রমে Node বানিয়েছে।

Script শেষ হওয়ার মুহূর্তটা দেখো। Timer তখনো host-এর কাছে, আর দুটো microtask অপেক্ষায়। Loop-এর ধাপ 2 দুটোকেই চালায়। তার পরেই timer-এর callback task queue-তে আসে, তারপর stack-এ। শেষ frame-এ Node-এর আসল ক্রম: start, end, then, micro, timeout।

setTimeout(callback, ms);        // the host waits ms, then callback joins the TASK queue
queueMicrotask(callback);        // callback joins the MICROTASK queue
promise.then(callback);          // a microtask too (Module 13)

// the loop, forever:
// 1. run the current task until the stack is empty (first task: the main script)
// 2. run every microtask, new ones included
// 3. take the oldest task, go to 1

setTimeout(() => console.log("timer A"), 0);
console.log("sync 1");
queueMicrotask(() => console.log("micro A"));
setTimeout(() => console.log("timer B"), 0);
queueMicrotask(() => console.log("micro B"));
console.log("sync 2");

sync 1
sync 2
micro A
micro B
timer A
timer B

setTimeout(() => console.log("timer"), 0);
queueMicrotask(() => {
  console.log("micro 1");
  queueMicrotask(() => console.log("micro 2, queued by micro 1"));
});
console.log("script done");

script done
micro 1
micro 2, queued by micro 1
timer

let ready = false;
setTimeout(() => {
  ready = true;
}, 0);
console.log("ready:", ready);

ready: false

let done = false;
setTimeout(() => {
  done = true;
}, 10);
const start = Date.now();
while (!done && Date.now() - start < 300) {}
console.log("done after the loop:", done);

done after the loop: false

setTimeout(() => console.log("1"), 0);
queueMicrotask(() => console.log("2"));
setTimeout(() => console.log("3"), 0);
console.log("4");

6
timeout tea
log one
micro milk
log two
timeout cake
micro sugar

one
two
milk
sugar
tea
cake

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

4
100 30
0 0
20 500
5 5

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

100
1
500
5

4
timeout cat
log dog
micro owl
log ant
dog ant cat owl

const input = require("fs").readFileSync(0, "utf8");
const tokens = input.split(/\s+/).filter(Boolean);
let at = 0;
const next = () => tokens[at++];
const nextInt = () => Number(next());
const out = [];

// your code: read with next() and nextInt(), push every line of output to out

console.log(out.join("\n"));

wrong at 3

এরপর: হাতিয়ারগুলোর প্রতিটা, একে একে: setTimeout-এর আসল কথা, setInterval, বাতিল করা, আর callback-এর আকার।