fgerschau / comments

1 stars 0 forks source link

javascript-event-loop-call-stack/ #5

Open utterances-bot opened 4 years ago

utterances-bot commented 4 years ago

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 commented 4 years ago

Thanks, I'll check it out!

1isten commented 4 years ago

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

keemor commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

Great article, Thanks

ennemli commented 3 years ago

Awesome post, Thanks

vladyslav571 commented 3 years ago

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 commented 3 years ago

Exactly what i was looking for. Great article.

fizalihsan commented 3 years ago

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

apassiondev commented 2 years ago

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 commented 2 years ago

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

tanthongtan commented 2 years ago

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

przemek-nowicki commented 2 years ago

Absolutely brilliant blog post. Thank you!

jerryphm commented 2 years ago

great article ! thank you

loriculberson commented 2 years ago

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 commented 2 years ago

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

ReeceHsu commented 1 year ago

This post helped me a lot! Thank you!

cagmz commented 1 year ago

Excellent post! Thanks.

tanleica commented 1 year ago

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 commented 1 year ago

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.