Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
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