Hi, Lydia Hallie, it is a great article.

Can I translate this article into Chinese to help more Chinese developers(With original author and link, of course).

Hi, Lydia!

This is such a great article! 😃

I was looking a clear post about this subject and yours is super comprehensive and well explained (btw, I loved the gifs). I'm planning to talk to my team about the event loop soon (in spanish).

I'm sure you might have heard about this tool that helps you play with this cycle and see in real time how it goes:

latentflip.com/loupe

Thanks for the great article and animations!
It's interesting why "event loop" question is so common on interviews, if it's job is just to transport code blocks from the queue to the call stack. I think better question would be to ask to describe how the JS mechanism works as a whole thing with call stack, web api, queue and event loop.

Interesting article! What did you use to animate the gifs?

I'm also a visual learner, so this was very helpful. I'm still early on with JavaScript and it's challenging to understand it all; are there any books out there for us visual learner that you might recommend?

Hi Lydia. Thanks for taking the time of generating these animations in order to explain it in a very simple way. Still, I have doubts regarding the Call Stack. Is it the same as the main thread in which JS runs? I mean, I understood that, although JS is single threaded, but for the asynchronous logic that gets executed, NodeJS would spawn threads for it while processing the main logic in the single thread. Thanks in advance :)

Awesome article! This has helped me a lot!

I was thinking about translating this series into Brazillian Portuguese. Do you happen to know if anyone has done it yet? Would you mind me doing it (ofc with links to the original series)

I'm not a JS developer but every now and then I have to dig into it. Over the past few years I've read lots of random things about the event loop but this is the first time I've had a clear picture of what's going on in the web browser (via the web api). Thanks!

Hi, Lydia Hallie can you tell me what is the case with setInterval in call stack a combination of setTimeout and setInterval see the usecase below. Is setInterval also supposed to go to webAPI?

let c = 0;let id = setInterval(()=> {console.log(c++)},200)setTimeout(()=> {clearInterval(id)},2000)// prints/* 012345678 9and then stops  */

Great article Lydia.
Thanks so much for bring that clear explanation.

Really nice article!
One thing I was confused about was

invoke bar. bar returns a setTimeout function.

Doesn't setTimeout return an id that you can pass to clearTimeout? 🤔

I have question here...

function hello() { // syncconsole.log("hello");}function afterWhile() { async  setTimeout(()=> {    console.log("After Timer")  }, 0)}afterWhile();hello();  // gets added in callstack then pop it out sequentally;// so callstack is empty here, i guess?!!!! so why callback hasn't been executed here, in this timehello();

callstack here carry on one task then remove it, so why callback hasn't executed after popping out instanctly?

Hi Lydia, I love the series. Just wondering what tool did you use to make those animations? I'm also writing some tech stuff but I can't find a perfect virtualization tool to illustrate my ideas, but your animations really match what I was looking for.

Thank you so much for the illustrations, Lydia! Very helpful, indeed!

One question: what happens when the main thread is blocked - i.e. the UI freezes? Would the whole interaction within that viewport be blocked - e.g. cursor wouldn't change after hovering a link?

I think I've never faced this situation before, so I'm curious how to identify such situation. Is there any way to simulate a huge processing in order to freeze my UI, just to see that?

Thanks in advance!

It's great article I saw. I have no more confused about it. I was trying to learn it but I can't. but Thank God, That I got your article on my browser home page. I want to also thank you daily.dev. they saw your article on my home page and I have come to your article and learned about event loop. Again Thank you so much Lydia Hallie from Omar.

Hi Lydia ,

Thanks for this useful article explaning a difficult to understand concept in a very simple way. And i want to translate it to Turkish to share in my personal blog, with linking the original author, do you have permission for this?

Hi Lydia
This an amazing visualization and demonstration of JavaScript event loop.

I want to ask you permission to translate this article to Persian (Iran's language) with the original post link of course so this article would be more accessible for other readers.

Hi Lydia, I watched your video and found it really informative. I’ve come across a few Event Loop visualizers before, but none of them really clicked for me, so I ended up building my own:event-loop-visualiser.ishanbagchi.com. Hope the community finds it useful! 😊

Hi, Lydia Hallie, this is a really informative article.
Please make a similar article on event loop in Node.js if possible.
It will be of immense importance to me as I am unable to get a proper explanation with an example.

Hi Lydia,

I'm refreshing my knowledge on the event loop and even though your article is mostly correct, it does not start strong with the incorrect statement:

Therespond function returns asetTimeout function.

This is incorrect. Therespond will return an integer. You can easily check this yourself by doing:

constreturned=respond();console.log(returned===parseInt(returned))// true

Bravo! It's a great article, exactly what I was looking for showing to my team.
Just an extra consideration, it would be very cool to show a final example when we have actually more than one async item at queue. Taking into consideration different times of response for those functions.

Good demonstration! But a little issue exists in my opinion.

The 1st animation, when the respond() function was pushed to the call stack and executed, the setTimeout() function should be pushed into the call stack (and executed) as soon as possible, instead of waited for about 1 second. Because, as the first and only one line code inside the respond() function, the call to setTimeout( ) should be executed immediately at that time. The second argument of setTimeout(), 1000ms, has only to do with how long the timer should be waiting to add the callback to the task queue, it does not have any effect for when the setTimeout() should be pushed into the call stack.

I wish I had made this little issue clear. btw, the last animation has the same issue too. Thank you.

This is the greatest article about Event Loop I've ever seen. You provided a complete explanation in a short time—perfect!
I hope you keep providing these videos, they are useful for every web developer.

excelente articulo, pensar que hace unos meses no entendia nada pero guarde el articulo ya que sabia que esto era clave, y ahora de tanto repasar js vanilla, pude entender jeje saludos desde la Patagonia, argentina.

Great explanations and descriptions. Interesting to note that in the final example the timer value is unimportant. Someone who is unaware of how the queue works might be surprised to find that a timer value of 0 still logs "Second" last. Which is actually an easy way to yield to the UI during a long-running process if it can be continued via a timer callback, which will happen virtually immediately if the queue is empty.

The best explanation I've ever seen, thank you for sharing!
What's the role of the HEAP that's mentioned on the first picture?

Good post, I really appreciate the effort you do to explain the things :)

Thanks for the great article, Lydia! Do you mind if I translate this JS Visualizeed series into Korean with the original article and author credit? I think a lot of Korean developers would be interested in learning them.

Tons of thanks for this great article and awesome animations! :)
I wonder if it would be possible to translate this article to Korean with the original post link for making this useful content be more accessible for other readers.

Awesome, thanks

I love gifs! Thanks for explanatio ! Not programming in javascript but was very interesting ti read!

You did a fantastic job of explaining and animating this.

Good stuff, Lydia! You have a very nice and straight-to-the-point way of expressing concepts, I'd love to read some more posts of yours, if you do have any!

Nice awesome articles and visullay explained the event loops :)

Hi Lydia,

such as great and helpful article! Would it be OK with you to translate it into German and to republish it ondrweb.de/ (with your author bio, of course)?

Thank you, — Markus

what about microtasks?

As a newbie to learning JS I appreciate your post and look forward to others.

bigleegeek

Nice article! Thanks for share!

Thanks!

Very helpful in further understanding the event loop! Thanks for posting, Lydia! :)

I was, currently and still impressed and wowwwwwed by this article. its as if this is the first time i am seeing a Promise.

Great article

Hey Lydia! This was amazingly explained! One thing I'm still now able to understand is what's microtasks and macrotasks! How engine prioritize those? Also how the Render/Paint queue work with the Normal queue?

Amazing!, it was so helpful, thanks

Fantastic visualization. Thanks Lydia

Hi, Lydia Hallie, Thank you for your great work. I want to translate your articles in Chinese to improve my English and skills😊.

I just wanna thank you for this amazing explanation, the first time I've read this 3 months ago, everything was new to me and blur.

Today I went on it again and it's just crystal clear too!

Thank you 3

What if there are no functions is the program?.lets say i have 10 instructions like variable deceleration, assignment , arthematic operations etc. Will all these instructions also go to call stack?
Var a = 10:
Var b;
b = a+ 10;

Thanks for the detailed post😃.

I have a question regarding this "Luckily, the browser gives us some features that the JavaScript engine itself doesn’t provide: a Web API. This includes the DOM API, setTimeout, HTTP requests, and so on. This can help us create some async, non-blocking behavior 🚀"

Does the Web API allow us to create asynchronous behavior? Doesn't it just give us features that the JS Engine does not have?
Am I wrong saying it's rather the event loop and the callback queue that allow us to create asynchronous behavior?

1. The timer runs, in the meantime foo gets invoked and logs First. foo returns (undefined),baz gets invoked, and the callback gets added to the queue.

I don't understand why it can log undefined in here, can you pls explain more ?

I just can't believe how ellaborate and simple this blog is !!!.This seriously made my day and saved me a lot of time.kudos to the writer!! I specifically created an account to make this comment to support this author.Expecting a lot of concepts to be simplified with gif's.

I am learning through your github repository Javascript Questions.
The all I have to say you made my life It's helping me alot to understading the javascript.
In one of those questions you shared the link of this article it's just an amazing stuff you shared on github thank you so much.

Super nice explanation. I've learnt new things with this article. Thanks!

So it's safe to say the purpose of the event loop is to prevent any callback clashes? 🤔

Muchas Gracias Lydia, aunque no pude entender tu video, el texto esta bien explicado y pude traducirlo, se que tengo que aprender Ingles, tan pronto termine el bootcamp hare un curso intensivo de Ingles, igualmente muchas Gracias por tu Articulo <3

Hi, Lydia, it is a great article.

It is a very visual and great, easy to understand, you saved my life.
Hungry to read these kind of posts.

Love your post!!!!

Hey, Lydia! How have you been? Awesome article!!

Can I translate this article series into Portuguese? (With original author and link, of course).

Images off

Great article and animations!

Nice, thank for you...love you <3

It's a gift of the Gods for a visual learner like me. Thanks for this ultra helpful article.

Thanks for a great article series. 👍

Great article, amazing animations makes me understand the topic easily.

Wow

Tnx for your effort.

Very informative. Hats off to the explanation!!!

Thank you for sharing, it's really interesting!

nice****

This is a great article, thanks for sharing!

Hello , Lydia Hallie, it is a great article.

Can I translate this article into Uzbek to help more Uzbek developers(With original author and link, of course). too

Amazing, really like you visualization

Super helpful and well written.

Thanks for taking your time to share this with us.

Hi@lydiahallie It was an amazing article and animations.

How did you create those animations?

Thanks for this article and also the others. Awesome explanation and awesome GIFs! Cool idea. I hope you have a nice day! :)

And finally i started to understand how the event loop works, thanks a loooot. I've been reading for days feeling confusing. Great job with those gif, love it.

Great job! Here's a deep dive from another presenter:latentflip.com/loupe - and with a live app to show the visualizations.

Fantastic 👍

Looks like "What the heck is the event loop anyway?" by Philip Roberts | JSConf EU
https://www.youtube.com/watch?v=8aGhZQkoFbQ&vl=en

Hi@lydiahallie , thank you for your super comprehensive explanation. All of the gifs are incredible, helped me a lot to understand more about javascript under the hood.

Thanks!!!! This article is amazing 👏👏👏

Great article!

Have you heard of loupe?latentflip.com/loupe/

Super clear explanation. Thanks for sharing this.

Hi Lydia Hallie,

I'm gonna make a presentasion and tell this subject to other students like me in my class. Can I use your gif images :)

Lydia, thank you for breaking this down for us! As a visual learner, this is gold!

Awesome. Great Job!

This is really usuful, the graphics help a lot 🤗

Lydia, big thanks, I have been coding for a while now, always wished I had some visual guidance at the start of my career and here you are. BIG THANKS AND HUGE RESPECT.

Hello Lydia,
I really appreciate you piece of work. Congratulations.

Great article, thanks! Could you please explain macro task and micro task in this visual way? It can definitely help others！

good good good...these visualizations are fabulous !!

Great post! Worths mentioning the job or microtask queue (promises) that has higher priority than the callback queue.

Hi, thank you for great article.
Can I translate this series into Korean in my blog? (of course with original author & link)

Thanks!

Now it time to add the promise's micro queue! :)

Image no longer exists!!!!!

This is one of the best articles I've seen on Event Loop. Thanks, Lydia for sharing :)

Super helpful! I love this!