Further Adventures of the Event Loop - Erin Zimmer - JSConf EU 2018

Most JavaScript developers are probably familiar with the event loop. It’s how JavaScript handles I/O events without blocking, even though it’s single-threaded. Event callbacks are added to the task queue. The browser then takes a callback from the queue and runs it from start to finish. Then it decides to either repaint or run another callback. Simple, right?
But what about web workers? And promises? And what happens when your JavaScript isn’t running in a browser? In this talk, we’ll look at how multi-threaded event loops work, how promises differ from other callbacks, and what goes on in the Node event loop.
OMG JSConf EU is coming back in 2019 2019.jsconf.eu/

[@loophostage]

Better late than never! Really happy to find such informative video. It’s definitely one of the most helpful explanation how event loop works as for me. Thank you!

[@MrKar18]

It clearly gave a great insight on the node js's event loop which is great to know for writing Unit tests in React ;) Since the Browser event and the NodeJs event loop are different, we mostly see workarounds involving setImmediate() in tests.

[@davlad32]

Great talk, this cleared up some big misconceptions I had about this topic. I'm really glad that I didn't have to skim through another class on the concept of callbacks/promises to get this info.

[@lebon1211]

Wow. This really took everything I knew and connected the dots so clearly! Well done!!

[@julienwickramatunga7338]

Nice and helpful talk, it's indeed a good sequel to Phil Robert's. Thank you very much :-)

[@vividhchandna]

Sad nobody got the "off by one error" joke at 17:55. Nice one.

[@bubucuo9195]

This is absolutely one of the most helpful video about event loop. Thanks a lot.

[@sasha_prisyazhnyy]

This is a great talk. Thank you Erin for translating the concept into a JavaScript developer language I can understand. I've got one question though - why everybody's got vodka on their tables?

[@RichFinelli]

Thanks for explaining what a 'microtask' is. I'm working with testing async stuff in Angular and couldn't figure out something in their API called 'flushMicrotasks' and your talk helped! Thanks

[@kajalgupta2964]

Stupendous! Explanation. I am all clear with event loop now

[@chrissherlock1748]

Brilliant talk! Thanks so much!

[@gauthierpeel5620]

very good talk : i learned a lot and easily, thanks !

[@hk_labs]

Really nice talk! Thanks!

[@ToniWCampbell]

The crowd wasn't very helpful with the laughs, but you did great anyways! Thanks for the talk!

[@Gelio1234]

The "laughs" appear often, also in other talks, but only when the speaker has a short break while speaking. I believe those are not laughs from the audience, but the microphone getting more sensitive and picking up different noises that sound like laughs. This is just an idea, though :D Makes me not sorry for the speakers

[@chipmo]

Yes, I was going to mention this as well. A lot of the bits that might sound like laughter seems much more likely they are audio artefacts as the background noise suppression kicks in.

[@aligarajian8806]

That was awesome! Two thumbs up 👍👍

[@lukaszollner2352]

Great talk, learned a lot, thank you =)

[@rpferrao]

Loved it, something that seemed complicated is actually dead simple!

[@user-uf3vm9jl4g]

brilliant talk, thanks

[@user-el9pr6ow9l]

Nice talk! Thanks

[@junezlx9236]

this is really very nice explanation

[@11Scorpion]

great content, great explanation

[@stonesnicola9439]

Very nice! Thank you!

[@vladlazar94]

I believe final snippet (14:03) is not entirely accurate. The microtask queue also flushes between animation tasks. It basically flushes every time the call stack returns.

[@passby8070]

great talk!

[@cheeru100]

very helpful~ Thanks

[@imhererahul]

hi, great talk !! But I have a doubt. From what I've read, the microtask queue has more priority than callback queue ? But according to the pseduo code, the callback queue(next task queue ?) has more priority. Can anymore correct my understanding ?

[@kushal1]

One mistake I feel in the explanation of event loop. If a queue task is picked up first. Then microtask loops. Not true. If microtask has any task it is given priority. Not the way the sequence is written in slide. According to slides, as soon as callstack is empty it pops up queue tasks first and then goes to a microtask loop. Try running below code and the output would be 10, 30, 20. ``` function abc(){ console.log(10); setTimeout(() => console.log(20), 0); Promise.resolve(30).then(res => console.log(res)); } abc(); ```

[@oathkitchenzhao9206]

really helpful, thanks

[@andriihordynskyi8778]

A really great topic she has covered. Great jokes tho. This audition should've been listening to her in the beginning..

[@forceboxed]

12:42 It's doing nothing only if the element did have the "slide" class already applied to it. If not, then after those two statements, it will have the class applied to it.

[@khalilliu1534]

super clear

[@rdandnayak]

Very nice

[@ajayChauhan-nt5xm]

With such sharp voice she could be a Chorister in orchestra bands

[@peteranthonyduot6027]

I thought that microtasks/services are being processed if there are 0 tasks in the current task list? I'm confused now.

[@erinzimmer9959]

Microtasks get processed when the stack is empty, which is a bit different to the current task list. Have a look at What the Heck is the Event Loop for more information about that side of things (kzbin.info/www/bejne/bpKqmY2HoNR5mLM)

[@theonlycatonice]

10:03 Ah yes pretty much a daily occurrence in software devving

[@prajwaljain1282]

isn't `taskQueue` a queue? And pop() will pop the element(task) from the end of the array (LIFO)?

[@davidmichaelwallace]

LIFO would be a stack

[@ravimone1]

Hello @JSConf, first of all, this is great community and this video is awesome , but just wanted to highlight a correction here @1:22, instead of this line `task = taskQueue.pop(); => task = taskQueue.dequeue(); `, would have made more sense

[@user-kn3wo3vp5h]

Thanks for the wonderful speech. I have a question to ask: ``` setTimeout(() => { console.log("timeout 1"); requestAnimationFrame(() => console.log("rAF callback")); const now = performance.now(); while(performance.now() - now < 2) {} // lock the event loop }); setTimeout(() => console.log("timeout 2")); ``` Sometimes the result is: timeout 1、timeout 2、rAF callback Sometimes the result is: timeout 1、rAF callback、timeout 2 Is this related to isRepaintTime? How to judge this?