Build a Game Project: Feed-A-Star-Mole

Intervals & Timeouts

Brian Holt

SQLite Cloud
Build a Game Project: Feed-A-Star-Mole

Check out a free preview of the full Build a Game Project: Feed-A-Star-Mole course

The "Intervals & Timeouts" Lesson is part of the full, Build a Game Project: Feed-A-Star-Mole course featured in this preview video. Here's what you'd learn in this lesson:

Brian highlights methods that allow for time handling within JavaScript.

Preview
Close

Transcript from the "Intervals & Timeouts" Lesson

[00:00:00]
>> Brian Holt: So let's talk about intervals. So how do I run a function again in a certain amount of time?
>> Brian Holt: Well, let's come back over here, and let's put this on the side for a second, to the left.
>> Brian Holt: If I say set time out,
>> Brian Holt: Function. Console.log, hi.

[00:00:34]
>> Brian Holt: Now, I want this to run after 5 seconds, I'm gonna put 5,000 cuz it's milliseconds.
>> Brian Holt: And it should come back in five seconds and logout hi. That's the hope.
>> Brian Holt: Maybe not, but that's what it should do. In any case, I promise you that's how that works.

[00:01:04]
I don't know why it's not working in my Firefox console at the moment.
>> Brian Holt: But that's what that says. So set timeout works once.
>> Brian Holt: Do I have a, I don't, that's okay.
>> Brian Holt: Well, I can put it in here, in my calculator. So I'm just gonna say, Set Timeout here, Function, console.log, heythere,

[00:01:39]
>> Brian Holt: And I'm gonna put 5000. So now, if I bring back up my calculator,
>> Brian Holt: And refresh the page,
>> Brian Holt: Hopefully after five seconds it comes back and it says, notice that doesn't immediately come in there and say hey there, it waits five seconds and does that, okay?

[00:02:03]
So that's how set time out works, it does it once. Now let's say I want this to happen every two seconds.
>> Brian Holt: Well, you can do something called set interval.
>> Brian Holt: Okay, so now if I refresh there,
>> Brian Holt: Every two seconds you can see there's a little number right there.

[00:02:24]
That means it's happening multiple times. Notice that every two seconds it's coming back and calling hey there. Or you can even do let num equal 1, num plus plus and just call num. And then we'll do it like every half a second.
>> Brian Holt: So that's pretty cool, right?

[00:02:53]
So this how you're gonna check over time how your application is changing and when you are going to know when to show moles and when not to show moles and that kind of stuff. This is gonna go on forever, right?
>> Brian Holt: [COUGH] You shouldn't necessarily have to do it, but I'm gonna show you anyway.

[00:03:11]
Sometimes you wanna cancel the interval, right? You want it to stop doing whatever it's doing. So the way you do that is you say const interval equals that. And then let's just say, I'm gonna set a timeout that after 10 seconds it's gonna stop it. So I'm gonna say Function,

[00:03:31]
>> Brian Holt: Cancel interval.
>> Brian Holt: I think it's cancel interval, I hope it is.
>> Brian Holt: Interval.
>> Brian Holt: Clear interval, sorry it's clearInterval, not cancel interval.
>> Brian Holt: clearInterval, I will do this after 5,000 milliseconds.
>> Brian Holt: So at some point, hopefully, it will just stop, and it does. So that's how you stop an interval from continuing to run.

[00:04:10]
You can also clear timeouts as well right? If you set a timeout and then you want to prevent it from eventually running you can also clear timeouts as well using the same methodology here.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now