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