Transcript from the "setInterval and Q&A" Lesson
[00:00:00]
>> Speaker 1: Is it supposed to be an infinite loop right now?
>> Brian Holt: It's kind of like a slow moving infinite loop.
>> Speaker 1: Okay.
>> Brian Holt: That's the point. Yeah.
>> Speaker 1: And there's really no better way in JavaScript to just say run this function every hundred milliseconds?
>> Brian Holt: There is, and so this is where we're looking forward, which is setInterval.
[00:00:18]
>> Speaker 1: Yeah.
>> Brian Holt: So you can see there.
>> Speaker 1: That make sense.
>> Brian Holt: But the problem with this, this is simpler, in the sense that this code is easier to read. But the problem with this is that it's a very blunt instrument, right? It's going to interrupt whatever your browser was doing, It's like, no, this has to run right now.
[00:00:57]
>> Speaker 3: If you go to another tab, with this set like that.
>> Brian Holt: It still runs.
>> Speaker 3: It's still using up memory, right?
>> Brian Holt: Yeah, it's still making requests and doing all that kinda stuff.
>> Speaker 3: requestAnimation would not be, right?
>> Brian Holt: Paused. Yeah, so the requestAnimationFrame will pause when you go to another tab.
[00:01:12]
Which is another advantage, right? So, if you have some battery, on the laptop, this is gonna burn battery.
>> Speaker 3: I have 50 instances of this game going cuz I like it so much and would be better to have.
>> Brian Holt: You're a real gaming man.
>> [LAUGH].
>> Speaker 3: What's that?
[00:01:28]
>> Brian Holt: I said you're a real gamer.
>> [LAUGH]
>> Speaker 1: Good explanations, it's just it's frustrating again.
>> [LAUGH]
>> Brian Holt: Yeap, this is a lot newer approach than this, we didn't use to have requestAnimationFrame, this is what you'd call a very hot code path, cuz it gets run very, very frequently and so you have to be a little bit more aware of the performance profile of what you're doing.
[00:01:57]
>> Speaker 1: And you can't just say requestAnimationFrame, every hundred milliseconds?
>> Brian Holt: No.
>> Speaker 1: So, do we need that for loop for anything, that you could have mentioned out?
>> Brian Holt: We do.
>> Speaker 1: You're still writing.
>> Brian Holt: Well, yeah we're gonna get there.
>> Brian Holt: So maybe, just for one more time to hammer it home.
[00:02:23]
Maybe it's useful to say, console.log.
>> Brian Holt: This is gonna log a lot of stuff out. So, we're gonna do console.log now,and runAgainAt.
>> Brian Holt: So this is about to log a bunch of stuff, but let's try it.
>> Brian Holt: So let's just look at one of these, right? So the first one is now and the second one is runAgainAt.
[00:02:55]
So you can see here, over time now is advancing, right? But, runAgainAt is staying the same number over time until eventually, we're going to get down to somewhere else and then it changes when runAgainAt, gets surpassed, right? And then runAgainAt stay static for a while, whereas data now changes every single time that you call it and then here, right?
[00:03:23]
Then it gets updated again, the runAgainAt and so that's you can see data now progressing over time and then runAgainAt is only getting updated every a hundred milliseconds. Is that helpful?
>> Speaker 1: One more time, the constant now that we defined represents that second number.
>> Brian Holt: Yep.
>> Speaker 1: Represents.
[00:03:43]
>> Brian Holt: No, that's the first one, this one all right? Now.
>> Speaker 1: Yes,
>> Brian Holt: It's this one, the one on the left.
>> Brian Holt: The only reason I did this where I said Date.now up here, is that I have to reference Date.now several times in here and calling Date.now isn't free.
[00:03:57]
It's cheap, but it's not free. So you could totally just put Date.now here at several places.
>> Speaker 1: So runAgainAt is, okay.
>> Brian Holt: That one is getting held static cuz that's why we're setting it right here, and we only set it again inside of here.
>> Speaker 3: Which means don't do this thing again until 100 milliseconds have happened.
[00:04:23]
>> Brian Holt: Precisely.
>> Speaker 3: Figured, think of it as one second to do something if you did 1000 milliseconds?
>> Brian Holt: Yep.
>> Brian Holt: So the funny thing if we did it this way, these are likely gonna be three different numbers.
>> Brian Holt: Cuz, if you call Date.now you're getting the current time, they might be the same thing.
[00:04:45]
It depends on how fast your computer really is and several other things, but how busy it is? Anyway, that's why I do just pulling it out here at the front.
>> Speaker 3: If you do it that way then there for sure the same, right?
>> Brian Holt: Yeah, not that it particularly matters, right?
[00:05:02]
It's all fuzzy math here.
>> Speaker 3: It's JavaScript.
>> Brian Holt: That's fair. [CROSSTALK] Assertion a level.
>> [LAUGH].
>> Brian Holt: Okay, so now that I'm guaranteeing that's it I'm only running this every hundred milliseconds. And feel free to like play with this timing right? You can make it run like every 10, you can make it run every second.
[00:05:25]
It just depends on how frequently you want the game to update itself.
>> Brian Holt: So what I'm going to do is I have all these mole objects that have a next in here, right? So we're gonna check that kind of the same thing before I'm gonna say, if it's time for this mole, update itself, then run its update function.
[00:05:44]
Otherwise, don't do anything.
>> Brian Holt: So here for let i, I'm gonna come in here and I'm gonna say if moles of i,
>> Brian Holt: i is less than mole.length.
>> Brian Holt: i++.
>> Brian Holt: What am I doing here? That's the for loop. Sorry, moles.next, starting over it now.
>> Brian Holt: So, I'm gonna run if statement here.
[00:06:22]
>> Brian Holt: If moles[i].next,
>> Brian Holt: Is less than now, or less than or equal to now since we'll be consistent.
>> Brian Holt: Then we're gonna run some function called getNextStatus.
>> Brian Holt: Of moles of i.
>> Brian Holt: So all this is saying, it's going over every single mole that's in the array and it's saying hey, is it your time to update yet?
[00:06:53]
If it says no, then it's cool, I'm gonna check the next one. If It's time for it update then it's gonna go through and it's gonna go through that pattern that we were talking to, right. If it's hungry, then it's gonna go to sad. If it's sad, it's gonna go to leaving.
[00:07:04]
If it's leaving, it's gonna go to gone. And if it's gone, it's going to go to hungry.
>> Brian Holt: We'll have a separate code path for feeding one, right? If someone actually successfully click, someone, but we'll get there momentarily.