Transcript from the "Running Continuously" Lesson
[00:00:00]
>> Brian Holt: So, let's go see what that looks like over here.
>> Brian Holt: I'm gonna write a function called nextFrame, cuz we're gonna have some sort of ticking thing of some function that's going to run. So, function nextFrame.
>> Brian Holt: I'm gonna say, const now = Date.now.
>> Brian Holt: And then I'll say, for.
[00:00:32]
>> Brian Holt: Yeah, okay, for(let i = 0; i < moles.length; i++).
>> Brian Holt: Well, yeah, I guess that's what we have to do as well.
>> Brian Holt: If.
>> Brian Holt: (RunAgainAt >= now), then we're gonna do another check.
>> Brian Holt: RunAgainAt, we're just gonna have equal to, let runAgainAt = Date.now, let's do a check every 100 milliseconds.
[00:01:33]
Since there's not a lot of going on in this game, we can check pretty frequently. So we're gonna check every 100 milliseconds, or every 10th of a second. RunAgainAt, so, once you've gotten past the point where now is greater than runAgainAt, so it is this way, so this is right.
[00:01:53]
Let me make sure that I'm doing this correctly, because I might. This is one of those things where you're just gonna have to guess and check [LAUGH].
>> Brian Holt: Let's do this, okay.
>> Brian Holt: Console.log('now'). And then, if that happens, then you're gonna say, runAgainAt = now + 100. Just coming back over here, run.
[00:02:30]
>> Brian Holt: And then you have to run it for the first time as well, nextFrame.
>> Brian Holt: And then you have to do requestAnimationFrame. Sorry, requestAnimationFrame(nextFrame).
>> Brian Holt: Or let's, what happens if you do this 1,000?
>> Brian Holt: Yeah, okay, that is right. So.
>> Brian Holt: The idea is, here with requestAnimationFrame is that, you are giving a function to the browser and saying, when you're not doing anything, next time you have an idle second, run this function.
[00:03:30]
So you're more or less guaranteeing that you're not interrupting something else, that's the point of requestAnimationFrame versus setInterval. It does not matter what the browser's doing, after 1,000 milliseconds it's gonna run that function, it's going to interrupt whatever was happening. The user could be scrolling or something bad, lots of bad things can happen if you setInterval in that way.
[00:03:51]
It can seem like your interface is a little more janky. So, what I'm doing here with this if runAgainAt <= now, I'm basically guaranteeing that this block is only gonna run every 100 milliseconds. Because I don't want it to run every millisecond, I want it to run every 100 milliseconds.
[00:04:15]
So, what I'm doing here is, I'm saying.
>> Brian Holt: Yeah, I guess, it's useful if I can demonstrate it here.
>> Brian Holt: So if I say Date.now, and then I call it again later, this number gets bigger over time. Cuz you're adding more and more milliseconds over time. So what I'm saying here is, once that number becomes bigger than runAgainAt, then run the function again, and I'm putting runAgainAt 100 milliseconds into the future.
[00:04:58]
>> Speaker 2: And is Date.now updating? When is now? [LAUGH]
No.
>> Brian Holt: So Date.now is, how many milliseconds it's been since January 1st, 1970. So that number is constantly getting larger and larger, and larger. So, what I'm just saying is, Date.now is this number I'm putting 100 milliseconds in the future, once Date.now gets past that number, then run that function again.
[00:05:33]
So we're capturing date.now in this runAgainAt. So this is now, at this moment in time, then when the function runs again, this now is updated to a new value, and we're comparing it to what it was last time I called it.
>> Speaker 2: Last time you called it?
>> Brian Holt: Last time I set it rather, cuz notice, this is inside the if statement.
[00:05:54]
>> Speaker 2: Okay, so first you're setting runAgainAt, and then you're calling it again within itself?
>> Brian Holt: Mm-hm.