[{"data":1,"prerenderedAt":266},["ShallowReactive",2],{"term-e\u002Fevent-loop":3,"related-e\u002Fevent-loop":248},{"id":4,"title":5,"acronym":6,"body":7,"category":230,"description":231,"difficulty":232,"extension":233,"letter":234,"meta":235,"navigation":77,"path":236,"related":237,"seo":242,"sitemap":243,"stem":246,"subcategory":6,"__hash__":247},"terms\u002Fterms\u002Fe\u002Fevent-loop.md","Event Loop",null,{"type":8,"value":9,"toc":224},"minimark",[10,15,19,23,26,30,213,217,220],[11,12,14],"h2",{"id":13},"eli5-the-vibe-check","ELI5 — The Vibe Check",[16,17,18],"p",{},"JavaScript can only do one thing at a time (single-threaded), but the Event Loop is the trick that makes it seem like it can multitask. It constantly checks: 'Is the call stack empty? Great, let me pull the next task from the queue.' This is how setTimeout, Promises, and fetch callbacks all get their turn without blocking each other.",[11,20,22],{"id":21},"real-talk","Real Talk",[16,24,25],{},"The Event Loop is the mechanism that allows JavaScript's single-threaded runtime to perform non-blocking operations. It monitors the call stack and the task queues (macro-task queue for setTimeout\u002FsetInterval, microtask queue for Promise callbacks). When the call stack is empty, it processes microtasks first, then picks up one macro-task.",[11,27,29],{"id":28},"show-me-the-code","Show Me The Code",[31,32,37],"pre",{"className":33,"code":34,"language":35,"meta":36,"style":36},"language-javascript shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","console.log('1')\n\nsetTimeout(() => console.log('2'), 0)\n\nPromise.resolve().then(() => console.log('3'))\n\nconsole.log('4')\n\n\u002F\u002F Output: 1, 4, 3, 2\n\u002F\u002F Promise (microtask) runs before setTimeout (macro-task)\n","javascript","",[38,39,40,72,79,122,127,170,175,195,200,207],"code",{"__ignoreMap":36},[41,42,45,49,53,57,60,63,67,69],"span",{"class":43,"line":44},"line",1,[41,46,48],{"class":47},"sTEyZ","console",[41,50,52],{"class":51},"sMK4o",".",[41,54,56],{"class":55},"s2Zo4","log",[41,58,59],{"class":47},"(",[41,61,62],{"class":51},"'",[41,64,66],{"class":65},"sfazB","1",[41,68,62],{"class":51},[41,70,71],{"class":47},")\n",[41,73,75],{"class":43,"line":74},2,[41,76,78],{"emptyLinePlaceholder":77},true,"\n",[41,80,82,85,87,90,94,97,99,101,103,105,108,110,113,116,120],{"class":43,"line":81},3,[41,83,84],{"class":55},"setTimeout",[41,86,59],{"class":47},[41,88,89],{"class":51},"()",[41,91,93],{"class":92},"spNyl"," =>",[41,95,96],{"class":47}," console",[41,98,52],{"class":51},[41,100,56],{"class":55},[41,102,59],{"class":47},[41,104,62],{"class":51},[41,106,107],{"class":65},"2",[41,109,62],{"class":51},[41,111,112],{"class":47},")",[41,114,115],{"class":51},",",[41,117,119],{"class":118},"sbssI"," 0",[41,121,71],{"class":47},[41,123,125],{"class":43,"line":124},4,[41,126,78],{"emptyLinePlaceholder":77},[41,128,130,134,136,139,141,143,146,148,150,152,154,156,158,160,162,165,167],{"class":43,"line":129},5,[41,131,133],{"class":132},"sBMFI","Promise",[41,135,52],{"class":51},[41,137,138],{"class":55},"resolve",[41,140,89],{"class":47},[41,142,52],{"class":51},[41,144,145],{"class":55},"then",[41,147,59],{"class":47},[41,149,89],{"class":51},[41,151,93],{"class":92},[41,153,96],{"class":47},[41,155,52],{"class":51},[41,157,56],{"class":55},[41,159,59],{"class":47},[41,161,62],{"class":51},[41,163,164],{"class":65},"3",[41,166,62],{"class":51},[41,168,169],{"class":47},"))\n",[41,171,173],{"class":43,"line":172},6,[41,174,78],{"emptyLinePlaceholder":77},[41,176,178,180,182,184,186,188,191,193],{"class":43,"line":177},7,[41,179,48],{"class":47},[41,181,52],{"class":51},[41,183,56],{"class":55},[41,185,59],{"class":47},[41,187,62],{"class":51},[41,189,190],{"class":65},"4",[41,192,62],{"class":51},[41,194,71],{"class":47},[41,196,198],{"class":43,"line":197},8,[41,199,78],{"emptyLinePlaceholder":77},[41,201,203],{"class":43,"line":202},9,[41,204,206],{"class":205},"sHwdD","\u002F\u002F Output: 1, 4, 3, 2\n",[41,208,210],{"class":43,"line":209},10,[41,211,212],{"class":205},"\u002F\u002F Promise (microtask) runs before setTimeout (macro-task)\n",[11,214,216],{"id":215},"when-youll-hear-this","When You'll Hear This",[16,218,219],{},"The Event Loop explains why setTimeout(fn, 0) doesn't run immediately.,Long synchronous tasks block the Event Loop and freeze the UI.,Promises resolve in the microtask queue, before the next macro-task.",[221,222,223],"style",{},"html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}html pre.shiki code .sBMFI, html code.shiki .sBMFI{--shiki-light:#E2931D;--shiki-default:#FFCB6B;--shiki-dark:#FFCB6B}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}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":36,"searchDepth":74,"depth":74,"links":225},[226,227,228,229],{"id":13,"depth":74,"text":14},{"id":21,"depth":74,"text":22},{"id":28,"depth":74,"text":29},{"id":215,"depth":74,"text":216},"frontend","JavaScript can only do one thing at a time (single-threaded), but the Event Loop is the trick that makes it seem like it can multitask.","advanced","md","e",{},"\u002Fterms\u002Fe\u002Fevent-loop",[133,238,239,240,241],"Async\u002FAwait","Callback","Web Worker","INP",{"title":5,"description":231},{"changefreq":244,"priority":245},"weekly",0.7,"terms\u002Fe\u002Fevent-loop","VfXYgRiLwL8c4A7K3gYlMohHZUk1f6QfqBp8YhYIePs",[249,253,257,260,263],{"title":238,"path":250,"acronym":6,"category":230,"difficulty":251,"description":252},"\u002Fterms\u002Fa\u002Fasync-await","intermediate","Async\u002Fawait is syntactic sugar that makes Promises look like normal, readable code. Instead of chaining .then().then().",{"title":239,"path":254,"acronym":6,"category":230,"difficulty":255,"description":256},"\u002Fterms\u002Fc\u002Fcallback","beginner","A callback is just a function you pass to another function, saying 'when you're done, call this.",{"title":241,"path":258,"acronym":241,"category":230,"difficulty":251,"description":259},"\u002Fterms\u002Fi\u002Finp","INP measures how snappy your website feels every time you interact with it — not just the first click, but every button press, dropdown open, and form subm...",{"title":133,"path":261,"acronym":6,"category":230,"difficulty":251,"description":262},"\u002Fterms\u002Fp\u002Fpromise","A Promise is JavaScript's way of saying 'I'll give you a value eventually — it's not ready yet, but I promise.",{"title":240,"path":264,"acronym":6,"category":230,"difficulty":232,"description":265},"\u002Fterms\u002Fw\u002Fweb-worker","JavaScript normally runs on one thread, which means heavy computation freezes your UI.",1776518277878]