javascript-event-loop-call-stack/

[utterances-bot]

JavaScript Event Loop And Call Stack Explained

Learn how JavaScript works in the browser: In this article, I explain how the call stack, event loop, job queue and more work together.

https://felixgerschau.com/javascript-event-loop-call-stack/

[fgerschau]

Thanks, I'll check it out!

[1isten]

"...just like a fast-track queue at an amusement park." Thanks man, great article 🚀

[keemor]

I didn't know about setImmediate(), maybe because according to MDN it's supported only in IE10 -> https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate

There's type-o in image description: 'With a but of imagination,'; I guess you meant "bit" instead of "but"

Great article!

[fgerschau]

Hey, thanks for pointing that out!

I know setImmediate from NodeJS, but I didn't look up its browser support.

Since this article focuses more on the frontend I'll remove it :)

[hasanuzzamanbe]

Great article, Thanks

[ennemli]

Awesome post, Thanks

[VladyslavGoloshchapov]

I would suggest also adding terms microtasks, macrotasks as those are often asked on interviews LOL :) Also Promises aren`t the only example of microtasks https://developer.mozilla.org/en-US/docs/Web/API/HTML_DOM_API/Microtask_guide https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask

Also it may be worth noting that developer should be aware that microtasks which emit new microtasks will stop macro task queue from execution.

This is a logical conclusion, but maybe someone needs this hint

[okumujustine]

Exactly what i was looking for. Great article.

[fizalihsan]

Very well explained. The author has explained one of the advanced topics in such an easy way. Kudos for the visualization.

[apassiondev]

Hey, Felix. It's an insanely beautiful written article. I hope every writer dives deep to make hard-to-consume concepts easier to understand as you did.

[thanapoom21]

Well-explained and easy to understand. The animation is what many devs are looking for. Thank you.

[tanthongtan]

Been reading a few articles on the subject, this is the one that really cleared things up for me! Well written!

[przemek-nowicki]

Absolutely brilliant blog post. Thank you!

[jerryphm]

great article ! thank you

[loriculberson]

Great post! I reference it often when explaining the call stack to new engineers. Is there any way you can add a pause button to the animation?

[fgerschau]

@loriculberson thanks a lot! The animation is a video, you should be able to trigger the controls with a right-click.

[ReeceHsu]

This post helped me a lot! Thank you!

[cagmz]

Excellent post! Thanks.

[tanleica]

This article is exactly what I have recently been looking for. It will help me to understand why sometimes setTimeout(Fn, 0) make my code work. For an instance, I need to re-trigger an animation for some element. First I remove a css class that holds "animation" declaration, then call element.offsetWidth, then my last step is to re-add the class to the element again. Without setTimeout(Fn, 0) my animation does not work in mobile browser (android chrome and iphone safari), but does in computer desktop chrome. I am happy if you should reply for the situation I have mentioned above. Anyway, thank you lots for the great article. I will go in deeper re-reading it tonight! ❤️

[fgerschau]

Hey @tanleica. I'm glad you liked the article! However, I can't really tell you why your code doesn't work.

setTimeout(fn, 0) schedules the function to be executed when the thread stops being busy. So maybe you need to look at the order in which your functions are invoked.