কল স্ট্যাক

জাভাস্ক্রিপ্ট যখন একটা ফাংশন ডাকে, সেটা একটা স্ট্যাকের উপরে বসে। ফাংশনটা শেষ হলে স্ট্যাক থেকে নেমে যায়। শেষেরটা আগে নামে — এটাই স্ট্যাক।

function ভেতরে() {
  console.log('ভেতরের কাজ')
}

function বাইরে() {
  ভেতরে()
  console.log('বাইরের কাজ')
}

বাইরে()

বাইরে() ডাকার পর স্ট্যাক দাঁড়ায় [বাইরে], তারপর [বাইরে, ভেতরে]। ভেতরে শেষ হলে নেমে যায়, বাইরে তার পরের লাইনে যায়, তারপর সেও নামে।

স্ট্যাক একটাই

এটাই আসল কথা। ব্রাউজারে জাভাস্ক্রিপ্টের একটাই কল স্ট্যাক, মানে একটাই থ্রেড। এক সময়ে একটাই কাজ চলতে পারে।

তাই যদি একটা ফাংশন অনেকক্ষণ ধরে চলে, আর কিছুই চলতে পারে না — ক্লিক কাজ করে না, অ্যানিমেশন থেমে যায়, স্ক্রল আটকে যায়:

const শুরু = Date.now()
while (Date.now() - শুরু < 5000) {
  // পাঁচ সেকেন্ড ধরে স্ট্যাক দখল করে রাখা
}

এই পাঁচ সেকেন্ড পেজটা পুরোপুরি জমে থাকবে। "পেজ হ্যাং করেছে" বলতে সাধারণত এটাই বোঝায় — কোনো একটা কাজ স্ট্যাক ছাড়ছে না।

তাহলে অ্যাসিঙ্ক কাজ হয় কীভাবে

এখানেই ভুল ধারণাটা তৈরি হয়। fetch() বা setTimeout() জাভাস্ক্রিপ্ট নিজে করে না। এগুলো ব্রাউজারের দেওয়া সুবিধা, আর ব্রাউজারের নিজের আলাদা থ্রেড আছে।

জাভাস্ক্রিপ্ট শুধু বলে দেয় "এই কাজটা করো, শেষ হলে এই ফাংশনটা ডেকো" — তারপর সাথে সাথে পরের লাইনে চলে যায়। স্ট্যাক খালি থাকে।

কাজটা শেষ হলে ব্রাউজার সেই ফাংশনটা কোথায় রাখে, আর কখন সেটা চলার সুযোগ পায় — সেটাই পরের লেখার বিষয়।