requestAnimationFrame

[00:00:00]
>> Speaker 1: So I wanted to show you two ways of doing this. I showed you the interval way first, because that's the easier way to do it. And you are welcome to complete this particular project using setInterval. The new more modern way of doing things is something called request animation frame.

[00:00:17]
And so what request animation frame does is you're basically asking the browser, next time you have a second, next time you're not rendering something or executing something, run this for me, right? And that's usually not immediately, but it's usually no more than about a millisecond away, right, so the advantage of this is this helps you with performance because you're never forcing the browser to stop.

[00:00:41]
With set interval you're saying drop everything and run this right now, right? Whenever this interval is up, you have to do it right now. Which, it can be a problem if you're trying to re-render something or garbage collection is going on or any one of these things that could be potentially happening after that interval, okay?

[00:01:02]
So here I'm showing you both of them side by side. What's interesting is, why is requestAnimationFrame so much lower than setInterval, despite the fact they're both running about every second? Well something else that's really cool that requestAnimationFrame does is, if I'm playing your game, and then I get up and go do something else.

[00:01:25]
Or change the tab and read my email, and then I'm gonna come back to your game, requestAnimationFrame is gonna pause, okay, and then when the user opens it back up, it's gonna start going again. Whereas with setInterval, it does not matter. It's still running there in the backgrounds.

[00:01:41]
So that's another advantage of requestAnimationFrame. Now why is this a little bit tougher to do? So this top part right here, lines 7 through 11, this is roughly all the code that you need to run, the interval, right. Interval account, and then after every second plus plus and then set that to be the interior of it, right?

[00:02:12]
So that's roughly what I was showing you before. Let's show you what requestAnimationFrame looks like. So the first thing is I started down here, requestAnimationFrame right there. And then the first thing I do is run again at, right? So I'm letting the browser know, run this again at this particular time.

[00:02:34]
So I immediately started by saying run it now, right?. And then here I asked, if date.now is greater than run again at, right, so if I've gone past the time when I expect to run this again, then run this function body. Otherwise don't run it. Why is that?

[00:02:53]
Well, I'm just gonna show you what happens if I take this out.
>> Speaker 1: So let's put this in here. I just put this in here and paste it.
>> Speaker 1: So you can see there, it goes a little bit faster.
>> Speaker 1: I'm not exactly sure how fast that is.

[00:03:40]
It's more than a second though, right, or it's going faster than every once a second. So when I say requestAnimationFrame, it says, literally the next time you have nothing else to do, let me run my code again. And so that's quite frequently, right. So that's why you have to kind of mitigate that by saying, doing this run again thing.

[00:03:59]
So that's what I'm saying here, run again at date now plus 1000 milliseconds, right? So in 1000 milliseconds run this again. So you can see here this is gonna get run a lot. Luckily for us date.now is pretty fast and conditional checks are really fast, right? So this is still performance to do it this way.

[00:04:22]
You are welcome to do this either way. I like to do this with requestAnimationFrame but this project is hard enough as is, if interval speaks to you just go with it, okay.