[{"data":1,"prerenderedAt":931},["ShallowReactive",2],{"blog-javascript-eventloop":3},{"id":4,"title":5,"author":6,"body":7,"date":916,"description":917,"extension":918,"faq":919,"image":920,"meta":921,"navigation":258,"path":922,"seo":923,"stem":924,"tags":925,"updated":919,"__hash__":930},"blog\u002Fblog\u002Fjavascript-eventloop.md","Event Loop no JavaScript: por que o código não roda na ordem que você escreveu","Larissa Santos",{"type":8,"value":9,"toc":903},"minimark",[10,14,120,123,145,151,159,162,167,173,180,183,186,188,192,197,200,203,310,313,333,343,345,349,362,368,440,443,466,468,472,478,481,496,502,504,508,511,517,520,523,576,578,582,588,591,593,597,600,612,624,627,636,639,767,770,793,796,833,835,839,879,881,885,896,899],[11,12,13],"p",{},"Você já sabe o resultado desse código abaixo? Qual a ordem que ele será executado?",[15,16,21],"pre",{"className":17,"code":18,"language":19,"meta":20,"style":20},"language-js shiki shiki-themes material-theme-lighter github-dark github-dark","console.log('1')\nsetTimeout(() => console.log('2'), 0)\nconsole.log('3')\n","js","",[22,23,24,57,100],"code",{"__ignoreMap":20},[25,26,29,33,37,41,44,48,52,54],"span",{"class":27,"line":28},"line",1,[25,30,32],{"class":31},"sMo7A","console",[25,34,36],{"class":35},"sG-J9",".",[25,38,40],{"class":39},"sK_r7","log",[25,42,43],{"class":31},"(",[25,45,47],{"class":46},"sF_wb","'",[25,49,51],{"class":50},"s0vBq","1",[25,53,47],{"class":46},[25,55,56],{"class":31},")\n",[25,58,60,63,65,68,72,75,77,79,81,83,86,88,91,94,98],{"class":27,"line":59},2,[25,61,62],{"class":39},"setTimeout",[25,64,43],{"class":31},[25,66,67],{"class":35},"()",[25,69,71],{"class":70},"sFsEu"," =>",[25,73,74],{"class":31}," console",[25,76,36],{"class":35},[25,78,40],{"class":39},[25,80,43],{"class":31},[25,82,47],{"class":46},[25,84,85],{"class":50},"2",[25,87,47],{"class":46},[25,89,90],{"class":31},")",[25,92,93],{"class":35},",",[25,95,97],{"class":96},"s_k96"," 0",[25,99,56],{"class":31},[25,101,103,105,107,109,111,113,116,118],{"class":27,"line":102},3,[25,104,32],{"class":31},[25,106,36],{"class":35},[25,108,40],{"class":39},[25,110,43],{"class":31},[25,112,47],{"class":46},[25,114,115],{"class":50},"3",[25,117,47],{"class":46},[25,119,56],{"class":31},[11,121,122],{},"O timeout é zero milissegundos. Zero. E mesmo assim o resultado é:",[15,124,128],{"className":125,"code":126,"language":127,"meta":20,"style":20},"language-txt shiki shiki-themes material-theme-lighter github-dark github-dark","1\n3\n2\n","txt",[22,129,130,135,140],{"__ignoreMap":20},[25,131,132],{"class":27,"line":28},[25,133,134],{},"1\n",[25,136,137],{"class":27,"line":59},[25,138,139],{},"3\n",[25,141,142],{"class":27,"line":102},[25,143,144],{},"2\n",[11,146,147,148,150],{},"Por que o ",[22,149,85],{}," sai por último se o delay é zero?",[11,152,153,154,158],{},"A resposta está no ",[155,156,157],"strong",{},"Event Loop",", e entender isso muda a forma como você lê e escreve JavaScript.",[160,161],"hr",{},[163,164,166],"h2",{"id":165},"javascript-é-single-thread","JavaScript é single-thread",[11,168,169,170,36],{},"Antes de qualquer coisa, é importante entender isso: ",[155,171,172],{},"JavaScript executa uma coisa por vez",[11,174,175,176,179],{},"Não existe paralelismo real dentro do JavaScript. Há apenas uma linha de execução, chamada de ",[155,177,178],{},"thread",". Isso significa que, enquanto uma função está rodando, nenhuma outra pode rodar ao mesmo tempo.",[11,181,182],{},"Então como o JavaScript consegue fazer coisas assíncronas, como requisições HTTP, timers e eventos de clique, sem travar tudo?",[11,184,185],{},"É aí que entram as peças do Event Loop.",[160,187],{},[163,189,191],{"id":190},"as-três-peças","As três peças",[193,194,196],"h3",{"id":195},"_1-call-stack","1. Call Stack",[11,198,199],{},"A Call Stack é onde o código é executado. Funciona como uma pilha: o que entra por último, sai primeiro.",[11,201,202],{},"Quando você chama uma função, ela entra na stack. Quando ela termina, sai da stack. Simples assim.",[15,204,206],{"className":17,"code":205,"language":19,"meta":20,"style":20},"function soma(a, b) {\n  return a + b\n}\n\nfunction calcular() {\n  return soma(2, 3)\n}\n\ncalcular()\n",[22,207,208,232,248,253,260,272,291,296,301],{"__ignoreMap":20},[25,209,210,213,216,218,222,224,227,229],{"class":27,"line":28},[25,211,212],{"class":70},"function",[25,214,215],{"class":39}," soma",[25,217,43],{"class":35},[25,219,221],{"class":220},"sk1zL","a",[25,223,93],{"class":35},[25,225,226],{"class":220}," b",[25,228,90],{"class":35},[25,230,231],{"class":35}," {\n",[25,233,234,238,241,245],{"class":27,"line":59},[25,235,237],{"class":236},"s3Er8","  return",[25,239,240],{"class":31}," a",[25,242,244],{"class":243},"sFfmW"," +",[25,246,247],{"class":31}," b\n",[25,249,250],{"class":27,"line":102},[25,251,252],{"class":35},"}\n",[25,254,256],{"class":27,"line":255},4,[25,257,259],{"emptyLinePlaceholder":258},true,"\n",[25,261,263,265,268,270],{"class":27,"line":262},5,[25,264,212],{"class":70},[25,266,267],{"class":39}," calcular",[25,269,67],{"class":35},[25,271,231],{"class":35},[25,273,275,277,279,282,284,286,289],{"class":27,"line":274},6,[25,276,237],{"class":236},[25,278,215],{"class":39},[25,280,43],{"class":281},"sdv8B",[25,283,85],{"class":96},[25,285,93],{"class":35},[25,287,288],{"class":96}," 3",[25,290,56],{"class":281},[25,292,294],{"class":27,"line":293},7,[25,295,252],{"class":35},[25,297,299],{"class":27,"line":298},8,[25,300,259],{"emptyLinePlaceholder":258},[25,302,304,307],{"class":27,"line":303},9,[25,305,306],{"class":39},"calcular",[25,308,309],{"class":31},"()\n",[11,311,312],{},"A stack nesse momento ficaria assim:",[15,314,316],{"className":125,"code":315,"language":127,"meta":20,"style":20},"[ soma ]\n[ calcular ]\n[ main ]\n",[22,317,318,323,328],{"__ignoreMap":20},[25,319,320],{"class":27,"line":28},[25,321,322],{},"[ soma ]\n",[25,324,325],{"class":27,"line":59},[25,326,327],{},"[ calcular ]\n",[25,329,330],{"class":27,"line":102},[25,331,332],{},"[ main ]\n",[11,334,335,336,339,340,342],{},"Quando ",[22,337,338],{},"soma"," termina, sai. Quando ",[22,341,306],{}," termina, sai. Quando o script termina, sai.",[160,344],{},[193,346,348],{"id":347},"_2-web-apis","2. Web APIs",[11,350,351,352,354,355,358,359,36],{},"Quando você chama ",[22,353,62],{},", ",[22,356,357],{},"fetch",", ou adiciona um event listener, o ",[155,360,361],{},"browser assume o controle",[11,363,364,365,36],{},"Isso é importante: essas funcionalidades não são JavaScript puro. São APIs fornecidas pelo ambiente (browser ou Node.js). O JavaScript entrega a tarefa para elas e ",[155,366,367],{},"segue em frente sem esperar",[15,369,370],{"className":17,"code":18,"language":19,"meta":20,"style":20},[22,371,372,390,422],{"__ignoreMap":20},[25,373,374,376,378,380,382,384,386,388],{"class":27,"line":28},[25,375,32],{"class":31},[25,377,36],{"class":35},[25,379,40],{"class":39},[25,381,43],{"class":31},[25,383,47],{"class":46},[25,385,51],{"class":50},[25,387,47],{"class":46},[25,389,56],{"class":31},[25,391,392,394,396,398,400,402,404,406,408,410,412,414,416,418,420],{"class":27,"line":59},[25,393,62],{"class":39},[25,395,43],{"class":31},[25,397,67],{"class":35},[25,399,71],{"class":70},[25,401,74],{"class":31},[25,403,36],{"class":35},[25,405,40],{"class":39},[25,407,43],{"class":31},[25,409,47],{"class":46},[25,411,85],{"class":50},[25,413,47],{"class":46},[25,415,90],{"class":31},[25,417,93],{"class":35},[25,419,97],{"class":96},[25,421,56],{"class":31},[25,423,424,426,428,430,432,434,436,438],{"class":27,"line":102},[25,425,32],{"class":31},[25,427,36],{"class":35},[25,429,40],{"class":39},[25,431,43],{"class":31},[25,433,47],{"class":46},[25,435,115],{"class":50},[25,437,47],{"class":46},[25,439,56],{"class":31},[11,441,442],{},"O que acontece aqui:",[444,445,446,453,458,463],"ol",{},[447,448,449,452],"li",{},[22,450,451],{},"console.log('1')"," entra na stack, executa, sai",[447,454,455,457],{},[22,456,62],{}," entra na stack, entrega o callback para a Web API, sai",[447,459,460,452],{},[22,461,462],{},"console.log('3')",[447,464,465],{},"A Web API termina o timer e empurra o callback para a fila",[160,467],{},[193,469,471],{"id":470},"_3-a-fila-queue","3. A Fila (Queue)",[11,473,474,475,36],{},"Quando uma Web API termina seu trabalho, o callback não vai direto para a stack. Ele vai para uma ",[155,476,477],{},"fila de espera",[11,479,480],{},"E ele só sai dessa fila quando a stack estiver completamente vazia.",[15,482,484],{"className":125,"code":483,"language":127,"meta":20,"style":20},"Stack: []\nQueue: [ () => console.log('2') ]\n",[22,485,486,491],{"__ignoreMap":20},[25,487,488],{"class":27,"line":28},[25,489,490],{},"Stack: []\n",[25,492,493],{"class":27,"line":59},[25,494,495],{},"Queue: [ () => console.log('2') ]\n",[11,497,498,499,501],{},"Agora a stack está vazia. O Event Loop pega o callback da fila e coloca na stack. Ele executa. O ",[22,500,85],{}," aparece.",[160,503],{},[163,505,507],{"id":506},"o-event-loop-em-si","O Event Loop em si",[11,509,510],{},"O Event Loop é o mecanismo que conecta tudo isso. Ele fica em um loop contínuo fazendo uma pergunta:",[512,513,514],"blockquote",{},[11,515,516],{},"A stack está vazia? Se sim, pega o próximo item da fila.",[11,518,519],{},"É só isso. Simples assim na teoria, mas é o que permite que o JavaScript seja assíncrono mesmo sendo single-thread.",[11,521,522],{},"Visualizando o fluxo completo:",[15,524,526],{"className":125,"code":525,"language":127,"meta":20,"style":20},"console.log('1')     → Stack → executa → sai\nsetTimeout(fn, 0)    → Stack → entrega para Web API → sai\nconsole.log('3')     → Stack → executa → sai\n\nWeb API termina      → fn vai para a Queue\n\nEvent Loop verifica  → Stack está vazia? Sim\n                     → pega fn da Queue → coloca na Stack\n\nfn executa           → console.log('2') → sai\n",[22,527,528,533,538,543,547,552,556,561,566,570],{"__ignoreMap":20},[25,529,530],{"class":27,"line":28},[25,531,532],{},"console.log('1')     → Stack → executa → sai\n",[25,534,535],{"class":27,"line":59},[25,536,537],{},"setTimeout(fn, 0)    → Stack → entrega para Web API → sai\n",[25,539,540],{"class":27,"line":102},[25,541,542],{},"console.log('3')     → Stack → executa → sai\n",[25,544,545],{"class":27,"line":255},[25,546,259],{"emptyLinePlaceholder":258},[25,548,549],{"class":27,"line":262},[25,550,551],{},"Web API termina      → fn vai para a Queue\n",[25,553,554],{"class":27,"line":274},[25,555,259],{"emptyLinePlaceholder":258},[25,557,558],{"class":27,"line":293},[25,559,560],{},"Event Loop verifica  → Stack está vazia? Sim\n",[25,562,563],{"class":27,"line":298},[25,564,565],{},"                     → pega fn da Queue → coloca na Stack\n",[25,567,568],{"class":27,"line":303},[25,569,259],{"emptyLinePlaceholder":258},[25,571,573],{"class":27,"line":572},10,[25,574,575],{},"fn executa           → console.log('2') → sai\n",[160,577],{},[163,579,581],{"id":580},"por-que-isso-responde-a-pergunta-inicial","Por que isso responde a pergunta inicial?",[11,583,584,585,587],{},"O timeout era zero, mas o callback só pôde entrar na stack depois que ela esvaziou. E ela só esvaziou depois que o ",[22,586,462],{}," executou.",[11,589,590],{},"Mesmo com delay zero, o callback nunca pula a fila.",[160,592],{},[163,594,596],{"id":595},"microtasks-e-macrotasks","Microtasks e Macrotasks",[11,598,599],{},"Até aqui falamos de uma única fila. Na prática, existem duas, com prioridades diferentes.",[11,601,602,605,606,354,608,611],{},[155,603,604],{},"Macrotasks"," — ",[22,607,62],{},[22,609,610],{},"setInterval",", eventos de DOM. Essa é a fila que vimos até agora.",[11,613,614,605,617,354,620,623],{},[155,615,616],{},"Microtasks",[22,618,619],{},"Promise.then",[22,621,622],{},"queueMicrotask",". Essa fila tem prioridade maior.",[11,625,626],{},"A regra é:",[512,628,629],{},[11,630,631,632,635],{},"Depois que a stack esvazia, o Event Loop processa ",[155,633,634],{},"todas"," as microtasks antes de pegar a próxima macrotask.",[11,637,638],{},"Veja o que acontece aqui:",[15,640,642],{"className":17,"code":641,"language":19,"meta":20,"style":20},"console.log('1')\n\nsetTimeout(() => console.log('timeout'), 0)\n\nPromise.resolve().then(() => console.log('promise'))\n\nconsole.log('2')\n",[22,643,644,662,666,699,703,745,749],{"__ignoreMap":20},[25,645,646,648,650,652,654,656,658,660],{"class":27,"line":28},[25,647,32],{"class":31},[25,649,36],{"class":35},[25,651,40],{"class":39},[25,653,43],{"class":31},[25,655,47],{"class":46},[25,657,51],{"class":50},[25,659,47],{"class":46},[25,661,56],{"class":31},[25,663,664],{"class":27,"line":59},[25,665,259],{"emptyLinePlaceholder":258},[25,667,668,670,672,674,676,678,680,682,684,686,689,691,693,695,697],{"class":27,"line":102},[25,669,62],{"class":39},[25,671,43],{"class":31},[25,673,67],{"class":35},[25,675,71],{"class":70},[25,677,74],{"class":31},[25,679,36],{"class":35},[25,681,40],{"class":39},[25,683,43],{"class":31},[25,685,47],{"class":46},[25,687,688],{"class":50},"timeout",[25,690,47],{"class":46},[25,692,90],{"class":31},[25,694,93],{"class":35},[25,696,97],{"class":96},[25,698,56],{"class":31},[25,700,701],{"class":27,"line":255},[25,702,259],{"emptyLinePlaceholder":258},[25,704,705,709,711,714,716,718,721,723,725,727,729,731,733,735,737,740,742],{"class":27,"line":262},[25,706,708],{"class":707},"s3afY","Promise",[25,710,36],{"class":35},[25,712,713],{"class":39},"resolve",[25,715,67],{"class":31},[25,717,36],{"class":35},[25,719,720],{"class":39},"then",[25,722,43],{"class":31},[25,724,67],{"class":35},[25,726,71],{"class":70},[25,728,74],{"class":31},[25,730,36],{"class":35},[25,732,40],{"class":39},[25,734,43],{"class":31},[25,736,47],{"class":46},[25,738,739],{"class":50},"promise",[25,741,47],{"class":46},[25,743,744],{"class":31},"))\n",[25,746,747],{"class":27,"line":274},[25,748,259],{"emptyLinePlaceholder":258},[25,750,751,753,755,757,759,761,763,765],{"class":27,"line":293},[25,752,32],{"class":31},[25,754,36],{"class":35},[25,756,40],{"class":39},[25,758,43],{"class":31},[25,760,47],{"class":46},[25,762,85],{"class":50},[25,764,47],{"class":46},[25,766,56],{"class":31},[11,768,769],{},"Resultado:",[15,771,773],{"className":125,"code":772,"language":127,"meta":20,"style":20},"1\n2\npromise\ntimeout\n",[22,774,775,779,783,788],{"__ignoreMap":20},[25,776,777],{"class":27,"line":28},[25,778,134],{},[25,780,781],{"class":27,"line":59},[25,782,144],{},[25,784,785],{"class":27,"line":102},[25,786,787],{},"promise\n",[25,789,790],{"class":27,"line":255},[25,791,792],{},"timeout\n",[11,794,795],{},"O fluxo:",[444,797,798,803,808,814,819,822,828],{},[447,799,800,802],{},[22,801,451],{}," executa",[447,804,805,807],{},[22,806,62],{}," entrega o callback para a Web API",[447,809,810,813],{},[22,811,812],{},"Promise.resolve().then(...)"," coloca o callback na fila de microtasks",[447,815,816,802],{},[22,817,818],{},"console.log('2')",[447,820,821],{},"Stack esvazia",[447,823,824,825,827],{},"Event Loop processa microtasks primeiro: ",[22,826,739],{}," aparece",[447,829,830,831,827],{},"Event Loop pega a próxima macrotask: ",[22,832,688],{},[160,834],{},[163,836,838],{"id":837},"resumo","Resumo",[840,841,842,845,852,858,865,871],"ul",{},[447,843,844],{},"JavaScript é single-thread: executa uma coisa por vez",[447,846,847,848,851],{},"A ",[155,849,850],{},"Call Stack"," é onde o código roda",[447,853,854,857],{},[155,855,856],{},"Web APIs"," assumem tarefas assíncronas enquanto a stack segue em frente",[447,859,860,861,864],{},"Os callbacks vão para uma ",[155,862,863],{},"fila"," e só entram na stack quando ela estiver vazia",[447,866,867,868,870],{},"O ",[155,869,157],{}," é o mecanismo que faz essa verificação continuamente",[447,872,873,875,876,878],{},[155,874,616],{}," (Promises) têm prioridade sobre ",[155,877,604],{}," (setTimeout)",[160,880],{},[163,882,884],{"id":883},"conclusão","Conclusão",[11,886,887,888,891,892,895],{},"Event Loop não é um recurso avançado reservado para casos específicos. É o modelo de execução do JavaScript, e ele está presente em cada ",[22,889,890],{},"await",", cada ",[22,893,894],{},".then"," e cada evento que você escuta.",[11,897,898],{},"Quanto mais claro estiver esse modelo na sua cabeça, mais previsível o seu código assíncrono vai se tornar.",[900,901,902],"style",{},"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);}html pre.shiki code .sMo7A, html code.shiki .sMo7A{--shiki-light:#90A4AE;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sG-J9, html code.shiki .sG-J9{--shiki-light:#39ADB5;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .sK_r7, html code.shiki .sK_r7{--shiki-light:#6182B8;--shiki-default:#B392F0;--shiki-dark:#B392F0}html pre.shiki code .sF_wb, html code.shiki .sF_wb{--shiki-light:#39ADB5;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .s0vBq, html code.shiki .s0vBq{--shiki-light:#91B859;--shiki-default:#9ECBFF;--shiki-dark:#9ECBFF}html pre.shiki code .sFsEu, html code.shiki .sFsEu{--shiki-light:#9C3EDA;--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .s_k96, html code.shiki .s_k96{--shiki-light:#F76D47;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}html pre.shiki code .sk1zL, html code.shiki .sk1zL{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#FFAB70;--shiki-default-font-style:inherit;--shiki-dark:#FFAB70;--shiki-dark-font-style:inherit}html pre.shiki code .s3Er8, html code.shiki .s3Er8{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#F97583;--shiki-default-font-style:inherit;--shiki-dark:#F97583;--shiki-dark-font-style:inherit}html pre.shiki code .sFfmW, html code.shiki .sFfmW{--shiki-light:#39ADB5;--shiki-default:#F97583;--shiki-dark:#F97583}html pre.shiki code .sdv8B, html code.shiki .sdv8B{--shiki-light:#E53935;--shiki-default:#E1E4E8;--shiki-dark:#E1E4E8}html pre.shiki code .s3afY, html code.shiki .s3afY{--shiki-light:#E2931D;--shiki-default:#79B8FF;--shiki-dark:#79B8FF}",{"title":20,"searchDepth":59,"depth":59,"links":904},[905,906,911,912,913,914,915],{"id":165,"depth":59,"text":166},{"id":190,"depth":59,"text":191,"children":907},[908,909,910],{"id":195,"depth":102,"text":196},{"id":347,"depth":102,"text":348},{"id":470,"depth":102,"text":471},{"id":506,"depth":59,"text":507},{"id":580,"depth":59,"text":581},{"id":595,"depth":59,"text":596},{"id":837,"depth":59,"text":838},{"id":883,"depth":59,"text":884},"2026-04-02T17:23:00-03:00","Entenda como o JavaScript executa código assíncrono e por que o resultado nem sempre é o que você espera.","md",null,"\u002Fimages\u002Fblog\u002Feventloop.png",{},"\u002Fblog\u002Fjavascript-eventloop",{"title":5,"description":917},"blog\u002Fjavascript-eventloop",[926,927,928,929],"event loop","JavaScript","assíncrono","desenvolvimento","VkjucNDkD1lo8PhE2yPu_erk_NqiGvLWFONqxdRuS8c",1783037052683]