Request Idle Callback & Script Yielding

[00:00:00]
>> Request Idle Callback is the one that I mentioned before. It's known as cooperative scheduling of background tasks. And when I say background tasks, a lot of people say, that's good, but that's not what you're thinking, okay? So it's just to execute low-priority code before each frame, if there is enough time.

[00:00:18]
Remember, the idea here is to keep the frame rate consistent. And it's an argument where we can query how much time is left. So it's like, it says there is only ten milliseconds, and you say, I can't do what I need. So, okay, let's try the next one.

[00:00:37]
Okay, makes sense? So it's requestIdleCallback. You receive that argument and then you check how much time is left. That's all. So instead of setTimeout, you use this one. It's requestIdleCallback. What if there is no idle time? The browser will retry on each frame, and you can specify a timeout.

[00:01:02]
It's like, you know what? I can wait, I'm patient, but after three seconds, okay, give me some time even if it's not idle time. Okay, makes sense? It's just the timeout property. So you can see the APIs are pretty simple. You just need to understand when to use them and how you need them, that's all.

[00:01:29]
Efficient script yielding. In this case, it's a way to yield control to the browser before running our code. It's the new version of setTimeout zero. I'm not sure if you have seen that before. So I've used that in a lot of web apps, like decade ago when doing apps for smart TVs and smartphones.

[00:01:52]
The idea is that you say, you know what? I need to execute this code, okay? I but first browser, go and do your stuff and then go back to me. Why do you wanna do that? When you're doing Vanilla JS and you're working with the DOM, and you make a change in the DOM, until you release the thread, that change is not actually on the screen.

[00:02:17]
Does that make sense? So maybe you change the DOM and you want the browser to update the DOM immediately, but you still need to continue executing code. So then you yield control to the browser, and then you go back. It's called setImmediate. It is not a big deal, but setImmediate and you pass a code, and so then the browser will do its stuff.

[00:02:41]
And after that, immediately it will execute the function that you pass as an argument.