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

Callback Functions in JavaScript

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Using a One-Off Timer with setTimeout

3:26 with Andrew Chalkley

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);

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [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

      You need to sign up for Treehouse in order to set up Workspace

      Sign up