[{"data":1,"prerenderedAt":656},["ShallowReactive",2],{"print-topic-\u002Flearn\u002Fbn\u002Fcourses\u002Fevent-loop":3,"lessons-\u002Flearn\u002Fbn\u002Fcourses\u002Fevent-loop":46,"i-lucide:printer":652},{"id":4,"title":5,"access":6,"body":7,"description":21,"draft":22,"estimatedMinutes":23,"extension":24,"featured":25,"icon":26,"lang":27,"level":28,"meta":29,"navigation":25,"order":30,"path":31,"prerequisites":32,"resources":33,"seo":34,"sku":35,"stem":36,"subjects":37,"summary":39,"tags":40,"updated":44,"__hash__":45},"courses\u002Flearn\u002Fbn\u002Fcourses\u002Fevent-loop\u002Findex.md","ইভেন্ট লুপ","free",{"type":8,"value":9,"toc":17},"minimark",[10,14],[11,12,13],"p",{},"এই টপিকে দুটো লেখা আছে। প্রথমটা কল স্ট্যাক নিয়ে — কোড চলার সময় ঠিক কী হয়।\nদ্বিতীয়টা কিউ নিয়ে — কাজ শেষ হওয়ার পর কলব্যাক কোথায় অপেক্ষা করে, আর কোন\nকিউ আগে সুযোগ পায়।",[11,15,16],{},"ক্রম মেনে পড়লে ভালো, কারণ দ্বিতীয়টা প্রথমটার উপর দাঁড়িয়ে আছে।",{"title":18,"searchDepth":19,"depth":19,"links":20},"",3,[],"জাভাস্ক্রিপ্ট এক থ্রেডে চলেও কীভাবে একসাথে অনেক কাজ সামলায়।",false,20,"md",true,"lucide:repeat","bn","beginner",{},1,"\u002Flearn\u002Fbn\u002Fcourses\u002Fevent-loop",[],[],{"title":5,"description":21},null,"learn\u002Fbn\u002Fcourses\u002Fevent-loop\u002Findex",[38],"javascript","জাভাস্ক্রিপ্টের একটাই কল স্ট্যাক — মানে এক সময়ে একটার বেশি কাজ চলতে পারে না।\nতবু নেটওয়ার্ক রিকোয়েস্ট, টাইমার আর ক্লিক একসাথে সামলানো যায়, কারণ ভারী\nকাজগুলো ভাষাটা নিজে করে না; ব্রাউজার করে। ব্রাউজার কাজ শেষ করে কলব্যাকটা একটা\nকিউতে রেখে দেয়, আর ইভেন্ট লুপ স্ট্যাক খালি হলে সেটা তুলে নেয়।\nএই একটা নিয়ম বুঝলে `setTimeout(fn, 0)`-এর দেরি, প্রমিজের আগে চলা, আর\n\"পেজ হ্যাং করে আছে\" — তিনটাই একই ব্যাখ্যায় মিলে যায়।\n",[41,42,43],"ইভেন্ট-লুপ","অ্যাসিঙ্ক","প্রমিজ","2026-08-06","6BoixVqlBPimn2bTW-mXZLz2hVlq88kHiVNkO_SLh9w",[47,310],{"id":48,"title":49,"access":6,"body":50,"description":304,"extension":24,"lang":27,"meta":305,"navigation":25,"order":30,"partial":22,"path":306,"seo":307,"stem":308,"__hash__":309},"lessons\u002Flearn\u002Fbn\u002Fcourses\u002Fevent-loop\u002F01.call-stack.md","কল স্ট্যাক",{"type":8,"value":51,"toc":300},[52,56,59,165,186,191,194,197,260,263,269,273,284,287,296],[53,54,49],"h1",{"id":55},"কল-স্ট্যাক",[11,57,58],{},"জাভাস্ক্রিপ্ট যখন একটা ফাংশন ডাকে, সেটা একটা স্ট্যাকের উপরে বসে। ফাংশনটা শেষ\nহলে স্ট্যাক থেকে নেমে যায়। শেষেরটা আগে নামে — এটাই স্ট্যাক।",[60,61,65],"pre",{"className":62,"code":63,"language":64,"meta":18,"style":18},"language-js shiki shiki-themes github-dark-dimmed github-dark-dimmed","function ভেতরে() {\n  console.log('ভেতরের কাজ')\n}\n\nfunction বাইরে() {\n  ভেতরে()\n  console.log('বাইরের কাজ')\n}\n\nবাইরে()\n","js",[66,67,68,84,103,108,114,124,133,147,152,157],"code",{"__ignoreMap":18},[69,70,72,76,80],"span",{"class":71,"line":30},"line",[69,73,75],{"class":74},"sEYkB","function",[69,77,79],{"class":78},"s-wk_"," ভেতরে",[69,81,83],{"class":82},"sM9_K","() {\n",[69,85,87,90,93,96,100],{"class":71,"line":86},2,[69,88,89],{"class":82},"  console.",[69,91,92],{"class":78},"log",[69,94,95],{"class":82},"(",[69,97,99],{"class":98},"szYpP","'ভেতরের কাজ'",[69,101,102],{"class":82},")\n",[69,104,105],{"class":71,"line":19},[69,106,107],{"class":82},"}\n",[69,109,111],{"class":71,"line":110},4,[69,112,113],{"emptyLinePlaceholder":25},"\n",[69,115,117,119,122],{"class":71,"line":116},5,[69,118,75],{"class":74},[69,120,121],{"class":78}," বাইরে",[69,123,83],{"class":82},[69,125,127,130],{"class":71,"line":126},6,[69,128,129],{"class":78},"  ভেতরে",[69,131,132],{"class":82},"()\n",[69,134,136,138,140,142,145],{"class":71,"line":135},7,[69,137,89],{"class":82},[69,139,92],{"class":78},[69,141,95],{"class":82},[69,143,144],{"class":98},"'বাইরের কাজ'",[69,146,102],{"class":82},[69,148,150],{"class":71,"line":149},8,[69,151,107],{"class":82},[69,153,155],{"class":71,"line":154},9,[69,156,113],{"emptyLinePlaceholder":25},[69,158,160,163],{"class":71,"line":159},10,[69,161,162],{"class":78},"বাইরে",[69,164,132],{"class":82},[11,166,167,170,171,174,175,178,179,182,183,185],{},[66,168,169],{},"বাইরে()"," ডাকার পর স্ট্যাক দাঁড়ায় ",[66,172,173],{},"[বাইরে]",", তারপর ",[66,176,177],{},"[বাইরে, ভেতরে]","। ",[66,180,181],{},"ভেতরে","\nশেষ হলে নেমে যায়, ",[66,184,162],{}," তার পরের লাইনে যায়, তারপর সেও নামে।",[187,188,190],"h2",{"id":189},"স্ট্যাক-একটাই","স্ট্যাক একটাই",[11,192,193],{},"এটাই আসল কথা। ব্রাউজারে জাভাস্ক্রিপ্টের একটাই কল স্ট্যাক, মানে একটাই থ্রেড।\nএক সময়ে একটাই কাজ চলতে পারে।",[11,195,196],{},"তাই যদি একটা ফাংশন অনেকক্ষণ ধরে চলে, আর কিছুই চলতে পারে না — ক্লিক কাজ করে না,\nঅ্যানিমেশন থেমে যায়, স্ক্রল আটকে যায়:",[60,198,200],{"className":62,"code":199,"language":64,"meta":18,"style":18},"const শুরু = Date.now()\nwhile (Date.now() - শুরু \u003C 5000) {\n  \u002F\u002F পাঁচ সেকেন্ড ধরে স্ট্যাক দখল করে রাখা\n}\n",[66,201,202,222,250,256],{"__ignoreMap":18},[69,203,204,207,211,214,217,220],{"class":71,"line":30},[69,205,206],{"class":74},"const",[69,208,210],{"class":209},"sQdni"," শুরু",[69,212,213],{"class":74}," =",[69,215,216],{"class":82}," Date.",[69,218,219],{"class":78},"now",[69,221,132],{"class":82},[69,223,224,227,230,232,235,238,241,244,247],{"class":71,"line":86},[69,225,226],{"class":74},"while",[69,228,229],{"class":82}," (Date.",[69,231,219],{"class":78},[69,233,234],{"class":82},"() ",[69,236,237],{"class":74},"-",[69,239,240],{"class":82}," শুরু ",[69,242,243],{"class":74},"\u003C",[69,245,246],{"class":209}," 5000",[69,248,249],{"class":82},") {\n",[69,251,252],{"class":71,"line":19},[69,253,255],{"class":254},"s0RzX","  \u002F\u002F পাঁচ সেকেন্ড ধরে স্ট্যাক দখল করে রাখা\n",[69,257,258],{"class":71,"line":110},[69,259,107],{"class":82},[11,261,262],{},"এই পাঁচ সেকেন্ড পেজটা পুরোপুরি জমে থাকবে। \"পেজ হ্যাং করেছে\" বলতে সাধারণত\nএটাই বোঝায় — কোনো একটা কাজ স্ট্যাক ছাড়ছে না।",[264,265,266],"note",{},[11,267,268],{},"ব্রাউজার রেন্ডারিংও একই থ্রেডে হয়। তাই স্ট্যাক ব্যস্ত মানে শুধু আপনার কোড নয়,\nপর্দায় আঁকার কাজটাও থেমে থাকে।",[187,270,272],{"id":271},"তাহলে-অ্যাসিঙ্ক-কাজ-হয়-কীভাবে","তাহলে অ্যাসিঙ্ক কাজ হয় কীভাবে",[11,274,275,276,279,280,283],{},"এখানেই ভুল ধারণাটা তৈরি হয়। ",[66,277,278],{},"fetch()"," বা ",[66,281,282],{},"setTimeout()"," জাভাস্ক্রিপ্ট নিজে\nকরে না। এগুলো ব্রাউজারের দেওয়া সুবিধা, আর ব্রাউজারের নিজের আলাদা থ্রেড আছে।",[11,285,286],{},"জাভাস্ক্রিপ্ট শুধু বলে দেয় \"এই কাজটা করো, শেষ হলে এই ফাংশনটা ডেকো\" — তারপর\nসাথে সাথে পরের লাইনে চলে যায়। স্ট্যাক খালি থাকে।",[11,288,289,290,295],{},"কাজটা শেষ হলে ব্রাউজার সেই ফাংশনটা কোথায় রাখে, আর কখন সেটা চলার সুযোগ পায় —\nসেটাই ",[291,292,294],"a",{"href":293},"\u002Flearn\u002Fbn\u002Fjavascript\u002Fevent-loop\u002Fdocs\u002Ftask-queues","পরের লেখার"," বিষয়।",[297,298,299],"style",{},"html pre.shiki code .sEYkB, html code.shiki .sEYkB{--shiki-default:#F47067;--shiki-dark:#F47067}html pre.shiki code .s-wk_, html code.shiki .s-wk_{--shiki-default:#DCBDFB;--shiki-dark:#DCBDFB}html pre.shiki code .sM9_K, html code.shiki .sM9_K{--shiki-default:#ADBAC7;--shiki-dark:#ADBAC7}html pre.shiki code .szYpP, html code.shiki .szYpP{--shiki-default:#96D0FF;--shiki-dark:#96D0FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sQdni, html code.shiki .sQdni{--shiki-default:#6CB6FF;--shiki-dark:#6CB6FF}html pre.shiki code .s0RzX, html code.shiki .s0RzX{--shiki-default:#768390;--shiki-dark:#768390}",{"title":18,"searchDepth":19,"depth":19,"links":301},[302,303],{"id":189,"depth":86,"text":190},{"id":271,"depth":86,"text":272},"এক থ্রেড, এক স্ট্যাক — আর এর ফলে কী কী হয়।",{},"\u002Flearn\u002Fbn\u002Fcourses\u002Fevent-loop\u002Fcall-stack",{"title":49,"description":304},"learn\u002Fbn\u002Fcourses\u002Fevent-loop\u002F01.call-stack","bBbpl-84LEbDnPJWxkorGp1Y31DKL64tqsCNK09L5O4",{"id":311,"title":312,"access":6,"body":313,"description":646,"extension":24,"lang":27,"meta":647,"navigation":25,"order":86,"partial":22,"path":648,"seo":649,"stem":650,"__hash__":651},"lessons\u002Flearn\u002Fbn\u002Fcourses\u002Fevent-loop\u002F02.task-queues.md","টাস্ক কিউ",{"type":8,"value":314,"toc":641},[315,318,321,324,330,334,337,395,403,508,524,541,550,554,557,598,605,614,618,638],[53,316,312],{"id":317},"টাস্ক-কিউ",[11,319,320],{},"ব্রাউজার কাজ শেষ করার পর কলব্যাকটা সরাসরি চালায় না। স্ট্যাক তখন ব্যস্ত থাকতে\nপারে। তাই কলব্যাকটা একটা কিউতে গিয়ে অপেক্ষা করে।",[11,322,323],{},"ইভেন্ট লুপের কাজ একটাই, আর সেটা খুব সহজ:",[325,326,327],"blockquote",{},[11,328,329],{},"স্ট্যাক খালি? তাহলে কিউ থেকে একটা কাজ তুলে স্ট্যাকে বসাও।",[187,331,333],{"id":332},"দুটো-কিউ-সমান-নয়","দুটো কিউ, সমান নয়",[11,335,336],{},"এখানেই বেশিরভাগ বিভ্রান্তি।",[338,339,340,356],"table",{},[341,342,343],"thead",{},[344,345,346,350,353],"tr",{},[347,348,349],"th",{},"কিউ",[347,351,352],{},"কারা যায়",[347,354,355],{},"অগ্রাধিকার",[357,358,359,378],"tbody",{},[344,360,361,365,375],{},[362,363,364],"td",{},"মাইক্রোটাস্ক",[362,366,367,368,371,372],{},"প্রমিজ, ",[66,369,370],{},"queueMicrotask",", ",[66,373,374],{},"MutationObserver",[362,376,377],{},"বেশি",[344,379,380,383,392],{},[362,381,382],{},"ম্যাক্রোটাস্ক",[362,384,385,371,388,391],{},[66,386,387],{},"setTimeout",[66,389,390],{},"setInterval",", ক্লিক, নেটওয়ার্ক ইভেন্ট",[362,393,394],{},"কম",[11,396,397,398,402],{},"স্ট্যাক খালি হলে ইভেন্ট লুপ ",[399,400,401],"strong",{},"পুরো মাইক্রোটাস্ক কিউ খালি করে",", তারপর একটা\nম্যাক্রোটাস্ক নেয়। একটা নয় — পুরোটা।",[60,404,406],{"className":62,"code":405,"language":64,"meta":18,"style":18},"console.log('১')\n\nsetTimeout(() => console.log('২'), 0)\n\nPromise.resolve().then(() => console.log('৩'))\n\nconsole.log('৪')\n",[66,407,408,422,426,454,458,491,495],{"__ignoreMap":18},[69,409,410,413,415,417,420],{"class":71,"line":30},[69,411,412],{"class":82},"console.",[69,414,92],{"class":78},[69,416,95],{"class":82},[69,418,419],{"class":98},"'১'",[69,421,102],{"class":82},[69,423,424],{"class":71,"line":86},[69,425,113],{"emptyLinePlaceholder":25},[69,427,428,430,433,436,439,441,443,446,449,452],{"class":71,"line":19},[69,429,387],{"class":78},[69,431,432],{"class":82},"(() ",[69,434,435],{"class":74},"=>",[69,437,438],{"class":82}," console.",[69,440,92],{"class":78},[69,442,95],{"class":82},[69,444,445],{"class":98},"'২'",[69,447,448],{"class":82},"), ",[69,450,451],{"class":209},"0",[69,453,102],{"class":82},[69,455,456],{"class":71,"line":110},[69,457,113],{"emptyLinePlaceholder":25},[69,459,460,463,466,469,472,475,477,479,481,483,485,488],{"class":71,"line":116},[69,461,462],{"class":209},"Promise",[69,464,465],{"class":82},".",[69,467,468],{"class":78},"resolve",[69,470,471],{"class":82},"().",[69,473,474],{"class":78},"then",[69,476,432],{"class":82},[69,478,435],{"class":74},[69,480,438],{"class":82},[69,482,92],{"class":78},[69,484,95],{"class":82},[69,486,487],{"class":98},"'৩'",[69,489,490],{"class":82},"))\n",[69,492,493],{"class":71,"line":126},[69,494,113],{"emptyLinePlaceholder":25},[69,496,497,499,501,503,506],{"class":71,"line":135},[69,498,412],{"class":82},[69,500,92],{"class":78},[69,502,95],{"class":82},[69,504,505],{"class":98},"'৪'",[69,507,102],{"class":82},[11,509,510,511,371,514,371,517,371,520,523],{},"আউটপুট: ",[66,512,513],{},"১",[66,515,516],{},"৪",[66,518,519],{},"৩",[66,521,522],{},"২","।",[11,525,526,528,529,531,532,534,535,537,538,540],{},[66,527,513],{}," আর ",[66,530,516],{}," সরাসরি চলে, কারণ ওরা স্ট্যাকেই আছে। তারপর স্ট্যাক খালি হয়।\n",[66,533,519],{}," মাইক্রোটাস্ক, তাই আগে। ",[66,536,522],{}," ম্যাক্রোটাস্ক, তাই শেষে — ",[66,539,451],{}," মিলিসেকেন্ড\nলেখা থাকা সত্ত্বেও।",[542,543,544],"tip",{},[11,545,546,549],{},[66,547,548],{},"setTimeout(fn, 0)"," মানে \"এখনই চালাও\" নয়। মানে \"কিউয়ের পেছনে দাঁড় করাও\"।\nসময়টা সর্বনিম্ন দেরি, নিশ্চিত দেরি নয়।",[187,551,553],{"id":552},"মাইক্রোটাস্ক-দিয়ে-পেজ-আটকে-দেওয়া","মাইক্রোটাস্ক দিয়ে পেজ আটকে দেওয়া",[11,555,556],{},"যেহেতু লুপ পুরো মাইক্রোটাস্ক কিউ খালি করে তবেই এগোয়, একটা মাইক্রোটাস্ক যদি\nনিজেই আরেকটা মাইক্রোটাস্ক যোগ করতে থাকে, কিউ কখনো খালি হয় না:",[60,558,560],{"className":62,"code":559,"language":64,"meta":18,"style":18},"function চিরকাল() {\n  Promise.resolve().then(চিরকাল)\n}\nচিরকাল()\n",[66,561,562,571,587,591],{"__ignoreMap":18},[69,563,564,566,569],{"class":71,"line":30},[69,565,75],{"class":74},[69,567,568],{"class":78}," চিরকাল",[69,570,83],{"class":82},[69,572,573,576,578,580,582,584],{"class":71,"line":86},[69,574,575],{"class":209},"  Promise",[69,577,465],{"class":82},[69,579,468],{"class":78},[69,581,471],{"class":82},[69,583,474],{"class":78},[69,585,586],{"class":82},"(চিরকাল)\n",[69,588,589],{"class":71,"line":19},[69,590,107],{"class":82},[69,592,593,596],{"class":71,"line":110},[69,594,595],{"class":78},"চিরকাল",[69,597,132],{"class":82},[11,599,600,601,604],{},"পেজ জমে যাবে। ",[66,602,603],{},"while (true)","-এর মতোই, কিন্তু দেখতে নিরীহ — কারণ কোডে কোনো\nলুপ নেই।",[606,607,608],"warning",{},[11,609,610,611,613],{},"এই ভুলটা বাস্তবে ঘটে রিকার্সিভ প্রমিজ চেইনে — যেখানে থামার শর্তটা কখনো\nসত্যি হয় না। ",[66,612,387],{}," দিয়ে একই জিনিস লিখলে পেজ বাঁচত, কারণ ম্যাক্রোটাস্কের\nমাঝে ব্রাউজার রেন্ডার করার সুযোগ পায়।",[187,615,617],{"id":616},"মনে-রাখার-মতো","মনে রাখার মতো",[619,620,621,625,628,635],"ul",{},[622,623,624],"li",{},"স্ট্যাক খালি না হলে কোনো কলব্যাক চলে না।",[622,626,627],{},"মাইক্রোটাস্ক সবসময় ম্যাক্রোটাস্কের আগে।",[622,629,630,631,634],{},"মাইক্রোটাস্ক কিউ ",[399,632,633],{},"পুরোটা"," খালি হয়, একটা করে নয়।",[622,636,637],{},"টাইমারের সময় মানে সর্বনিম্ন দেরি।",[297,639,640],{},"html pre.shiki code .sM9_K, html code.shiki .sM9_K{--shiki-default:#ADBAC7;--shiki-dark:#ADBAC7}html pre.shiki code .s-wk_, html code.shiki .s-wk_{--shiki-default:#DCBDFB;--shiki-dark:#DCBDFB}html pre.shiki code .szYpP, html code.shiki .szYpP{--shiki-default:#96D0FF;--shiki-dark:#96D0FF}html pre.shiki code .sEYkB, html code.shiki .sEYkB{--shiki-default:#F47067;--shiki-dark:#F47067}html pre.shiki code .sQdni, html code.shiki .sQdni{--shiki-default:#6CB6FF;--shiki-dark:#6CB6FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":18,"searchDepth":19,"depth":19,"links":642},[643,644,645],{"id":332,"depth":86,"text":333},{"id":552,"depth":86,"text":553},{"id":616,"depth":86,"text":617},"ম্যাক্রোটাস্ক, মাইক্রোটাস্ক আর কোনটা আগে চলে।",{},"\u002Flearn\u002Fbn\u002Fcourses\u002Fevent-loop\u002Ftask-queues",{"title":312,"description":646},"learn\u002Fbn\u002Fcourses\u002Fevent-loop\u002F02.task-queues","9RU6CRf8BUDTOLqXJkwY2RnOFqCaUHLpBXRyoA9O8kM",{"left":653,"top":653,"width":654,"height":654,"rotate":653,"vFlip":22,"hFlip":22,"body":655},0,24,"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6\"\u002F>\u003Crect width=\"12\" height=\"8\" x=\"6\" y=\"14\" rx=\"1\"\u002F>\u003C\u002Fg>",1787597899960]