Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video we'll explore one-off timers with the `setTimeout` function.
Syntax
setTimeout(callback, delay);
Where callback is a function and delay is the number of milliseconds until the callback is invoked.
Canceling a Timeout
To cancel a timeout before the callback is executed assign the timeout to a variable and call the clearTimeout function.
const timeoutID = setTimeout(callback, delay);
//Clears the timeout immediately
clearTimeout(timeoutID);
[MUSIC]
0:00
Callbacks are really handy for timers.
0:04
Think if you wanted something to
happen after a given period of time,
0:07
how would you do that?
0:11
JavaScript has a built-in function that
you can use that will trigger a callback
0:12
after a given period of time.
0:16
The function is called setTimeout.
0:18
To show how a one off timer works we're
going to build a simple surprise app.
0:21
After a random period of time, a surprise
message will appear to the site's visitor.
0:27
Open the workspace with this video and
you should see a surprise.js file.
0:33
Open the file, and
you can see the first line of code
0:39
starts by selecting the section
element with the ID of surprise.
0:45
The function showsSurprise, when invoked,
0:52
will update the text content
of the surprise section.
0:55
It will update it to the surprise message.
1:01
Preview the application and
then go to the developer console.
1:08
Let's call the function manually.
1:13
Instead of calling showSurprise ourselves,
1:19
we want it to be invoked after
a random period of time.
1:23
To invoke or
call a function after a period of time,
1:27
we can use the setTimeout function.
1:31
The setTimeout function requires a
function which is a callback function and
1:34
a delay in milliseconds.
1:39
Let's use setTimeout in our code.
1:41
We'll pass in the showSurprise
function as the first parameter.
1:44
Remember, you don't need
a pair of parentheses,
1:49
because we're not invoking
this show surprise function.
1:52
setTimeout is calling
showSurprise after a given delay.
1:55
Let's add a delay for one second.
1:59
Save the file and
preview the code in the browser.
2:03
As you can see, after a second
the surprise message appears.
2:09
The surprise will only
show after one second.
2:14
We want the surprise message to appear at
a random time in a four second period.
2:17
Let's create a variable called randomTime.
2:23
Then, we'll use Math.random,
2:29
To generate a random value between one and
zero.
2:34
Then we can multiply it by 4000,
Which is four seconds.
2:41
Then we can update the setTimeout
to use the random time.
2:49
Save the file and preview it
a couple of times by refreshing.
2:54
As you can see, we have the surprise
message appearing at different intervals.
3:06
Here's a challenge for you,
3:12
instead of passing in a reference to
showSurprise into the setTimeout function,
3:14
modify the code to use an anonymous
function to do the same thing.
3:19
In the next video,
I'll show you how I did it.
3:24
You need to sign up for Treehouse in order to download course files.
Sign up