The latest articles on DEV Community by Eduardo Drumond (@odrumond). https://dev.to/odrumond https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F975674%2Fca0f980a-57e2-43ed-94a9-cf93db6a5d7b.jpg https://dev.to/odrumond en Eduardo Drumond Sun, 20 Nov 2022 01:54:18 +0000 https://dev.to/odrumond/timeoutsintervals-vs-eventloops-39c https://dev.to/odrumond/timeoutsintervals-vs-eventloops-39c <h2> Em qual ordem os consoles serão logados? </h2> <p><a href="https://res.cloudinary.com/practicaldev/image/fetch/s--e_fXkZUQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hm16nu61buuf2uavo42.png" class="article-body-image-wrapper"><img src="https://res.cloudinary.com/practicaldev/image/fetch/s--e_fXkZUQ--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8hm16nu61buuf2uavo42.png" alt="Simples exemplo de operação com timeout" width="419" height="449"></a><br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>timeout executed last call finish code </code></pre> </div> <p>ou<br> </p> <div class="highlight js-code-highlight"> <pre class="highlight plaintext"><code>last call finish code timeout executed </code></pre> </div> <p>Se você tem um nível mais intermediário ou sênior, certamente saberá a resposta e não achará grande coisa. Mas se você está começando agora, certamente pode pensar que é um pouco contraintuitivo.</p> <p>Se você acredita que seja a segunda alternativa, então, meus parabéns, você está certo! Agora você sabe o porquê? </p> <p>Isso ocorre por causa de uma <em>coisinha</em> do JavaScript chamada de <strong>Event Loop</strong>.</p> <p>De maneira bem simplista: o EventLoop é uma fila de mensagens que a runtime do JavaScript executa. Cada mensagem tem uma função associada que é executada no formato de fila (FIFO).</p> <p>Por se tratar de uma fila, as mensagens mais antigas são processadas antes e, a próxima mensagem só é executada quando a mensagem corrente é finalizada.</p> <p>Aí você pergunta: </p> <blockquote> <p><em>"Okay, mas eu sei também que o runtime interpreta o código na ordem em que é executado, por que mesmo com 0ms no segundo argumento, o 'timeout executed' aparece por último?"</em></p> </blockquote> <p>É justamente por isso! Pode parecer estranho, mas o JavaScript, em sua base, é síncrono. Já o setTimeout/setInterval é feito para manipular o EventLoop de forma assíncrona.</p> <p>Com isto dito, o timeout só será executado depois que todo o código interpretado passar pelo EventLoop do JavaScript.</p> <p>Quando não houverem mais mensagens na fila do EventLoop, o callback do setTimeout será executado (no caso do snippet, imediatamente, por conta dos 0ms).</p> <p>É por isso que timeouts e intervalos não são recomendados para usecases que exigem extrema precisão. A depender de quão ocupada a fila de eventos esteja, pode ser que o callback não seja executado no tempo estipulado via parâmetro.</p> <h2> Conclusão / Referências </h2> <p>Intervalos e Timeouts podem ser bem confusos e contraintuitivo se não entendermos algumas partes das "entranhas" do JavaScript, rs.</p> <p>Links úteis:</p> <p><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop">https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop</a></p> <p><a href="https://ankitkamboj18.medium.com/is-javascript-synchronous-or-asynchronous-what-the-hell-is-a-promise-302ee008dfcd">https://ankitkamboj18.medium.com/is-javascript-synchronous-or-asynchronous-what-the-hell-is-a-promise-302ee008dfcd</a></p> <p><a href="https://medium.com/reactbrasil/como-o-javascript-funciona-o-event-loop-e-o-surgimento-da-programa%C3%A7%C3%A3o-ass%C3%ADncrona-5-maneiras-de-18d0b8d6849a">https://medium.com/reactbrasil/como-o-javascript-funciona-o-event-loop-e-o-surgimento-da-programa%C3%A7%C3%A3o-ass%C3%ADncrona-5-maneiras-de-18d0b8d6849a</a></p> <h2> Off Topic </h2> <p>Esse foi o meu primeiro texto aqui. 😅</p> <p>Se por algum acaso esse texto chegar até você e lhe der vontade de comentar algo, seja gentil 🫶🏼</p> <p>Nunca fui muito bom em escrever ou ensinar, mas tracei como objetivo melhorar estes aspectos e cá estou eu, começando agora o que havia prometido começar no início de 2022. <br> Decidi começar a escrever para melhorar alguns aspectos da minha comunicação e também como forma de estudar/documentar coisas legais de programação. :)</p> <p>Qualquer crítica construtiva é bem vinda.</p> javascript