Web APIs & Promises Example: Microtask Queue

[00:00:00]
>> Will Sentance: At 303 milliseconds.
>> Will Sentance: [LAUGH] I don't know why everyone, fears this anticipation. It's obvious, surely. I know how queues work, I even put a little comma between, so we really know how queues work. My event loop, there it is let's make sure it's on there, there it is.

[00:00:21]
The event loop, that's the one that's gonna do the checking if this is empty. Was it empty? Was it empty? Was it empty? No. Was the global context finished running? No. So the event was going nope, nope. But it turned to three milliseconds. The event loop checks the call stack, checks it any further, global code to run, and it goes, are we good to go?

[00:00:42]
We're good to go, we're good to check our queue. What, at that point, is it gonna run? Well, it should be obvious? Who would like to volunteer? I don't want the right answer, I want the answer that follows what a queue says is gonna be the answer here.

[00:00:56]
>> Audience: [LAUGH]
>> Will Sentance: Brayden, please, thank you.
>> Brayden: Train hello?
>> Will Sentance: Of course because printers [INAUDIBLE] bcnf so long it's in the front of, I know how a queue works and yet, he is fundamentally wrong I mean surely nice rather some things and yet not this time [LAUGH]
>> Audience: [LAUGH]

[00:01:12]
>> Will Sentance: All right, what do you think runs actually Brayden?
>> Brayden: The display.
>> Will Sentance: Yeah. But that makes no sense, I know how queues work. Can anybody take a leap of faith intellectual, on what might be happening here instead? I'm gonna tend to Kayla on this one.
>> Kayla: It's a different queue.

[00:01:32]
>> Will Sentance: She got it right. I tell you, in all the time I've given this talk, I would say one or two times that people would take that leap. Of intuit faith, so huge shout out to Kayla, exactly right. There's an additional queue. Now don't get me wrong, this big space here that I left might have been something of a giveaway.

[00:01:47]
>> Audience: [LAUGH]
>> Will Sentance: But that is fantastic, thank you to Kayla. Exactly right, there is in fact another queue. It's called, they call this in the spec, the task queue. So, you can maybe take a guess what the other one is called. It's called the microtask queue. There it is, the microtask queue.

[00:02:12]
And where do we think when display is triggered, and ready to run, do we think display shows up? Kayla is it in the callback queue, or the microtask queue?
>> Kayla: The microtask queue.
>> Will Sentance: The microtask queue, she is spot on into the microtask queue. It went display, with by the way, the high argument ready to be inserted into it, the high data at 270 milliseconds.

[00:02:38]
There it is, let's get it out of the back of the queue here. No, no, no, no, no. Not here, thank you to Brayden for playing along. No, not at the back of the queue there, and so, where? Once the event loop at 303 milliseconds goes, we're clear on the synchronous global code.

[00:03:03]
Where Kayla, do you think it heads to first, which queue do you think it heads to first?
>> Kayla: The microtask queue
>> Will Sentance: The microtask queue she's spot on, it grabs display it dequeues it, grabs its code. It puts it on the call stack. With the inserted argument automatically, of the value high, it adds the parental automatically JavaScript.

[00:03:32]
It inserts the argument JavaScript automatically. I love that. So that's very important to sort of spot. And it executes it, and so what, to Matt. Matt, what's gonna show up in our console, at 303 milliseconds?
>> Matt: High.
>> Will Sentance: It's gonna be high, I should have asked Todd. It's gonna be high, exactly at 303 milliseconds, we get high in our console.

[00:04:01]
And finally, our poor little, the microtask queue is now empty. And the event loop finally goes. It's time to go down to the callback queue. Where what does it find? But our little friend print hello, who's been waiting there for 304 milliseconds. But, after removing display from the call stack, it's finished running, we're finally at 304 milliseconds, are able for the event loop to check our final queue, the callback queue.

[00:04:41]
Where for 304 milliseconds, print hello has been sitting there ready to run. It's dreamed, but now is its moment. Look how proud it is. It jumps up, into the call stack. There it is print hello on the call stack at 304 milliseconds. What therefore Ethan at 304 milliseconds, what do we see in our console then?

[00:05:10]
What's gonna console log but?
>> Ethan: Hello.
>> Will Sentance: Hello. Exactly. [SOUND] Wow people, well done. My goodness, that is the entire model of a synchronous JavaScript behind the scenes. We have two queues. We enqueue print hello, we pop it off the call stack at that point. We have two queues, any function that is thrown out of JavaScript, or at least a link back to it is thrown out of JavaScript, via the old school callback facade functions like set timeout.

[00:05:47]
Those functions when the background work is complete, second in the callback queue. Any function that is attached to a promise object via the then method, and then auto triggered to run from within JavaScript when the value property that promise object gets updated automatically, as a result of the background work from a two pronged facade function like fetch.

[00:06:14]
That function ain't going in the callback queue. It's going in the microtask queue. And when all global code is finished running, and there's nothing on the call stack, the event loop goes and checks the queues. Which does it check first? The microtask queue. It dequeues the function, runs it, and then only finally then does it check the callback queue.