"Using PHP with MySQL" was retired on March 1, 2017. You are now viewing the recommended replacement.

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

Well done!

You have completed Callback Functions in JavaScript!

Sign up for Treehouse Back to Library

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