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 use a repeat timer in the form of the `setInterval` function to modify the display of a clock.
Syntax
setInterval(callback, delay);
Where callback is a function and delay is the number of milliseconds between each invocation.
Canceling a Timeout
To cancel a interval at any time assign the interval to a variable and call the clearInterval function.
const intervalID = setInterval(callback, delay);
//Clears the interval immediately
clearInterval(intervalID);
The setTimeout function only runs the callback one time. 0:00 There is another function will repeatedly call a call back after a delay 0:05 continually. 0:09 And that's the setInterval function. 0:10 Now that we're used to a one off timer, 0:13 we're going to use a repeat timer to build a clock like this. 0:15 Open the workspace accompanying this video. 0:20 In the clock.js file there's some JavaScript code already. 0:23 First, let's select in this section element with the ID of clock on the page 0:27 and assigning it to the clockSection variable. 0:32 Then we have a getTime function that formats some time from today's date. 0:35 The get time function represents a string that represents the time. 0:41 Finally we have the tick clock function that displays the clock. 0:46 Click on the preview and you'll see the text clock goes here. 0:51 Open up the developer tools and you can call tickClock manually. 0:58 Instead of me calling the tickClock function over and over again myself I can 1:11 use this set interval function to execute the callback every second. 1:16 Remember one second is 1,000 milliseconds. 1:35 Save the clock and then preview. 1:40 We see clock goes here for one second, and then the clock ticks. 1:44 This is because the set interval function starts after the delay. 1:50 And is not invoked immediately. 1:57 To get around this, we can call the tickClock function immediately ourselves 2:00 when the page loads, and then let the setInterval do it every second afterwards. 2:04 Okay, I have another challenge for you. 2:11 Can you try and 2:14 use an anonymous function with these set interval in the clock application. 2:15 If you try and can't, can you explain why? 2:20 I'll share with you my thoughts and the solution next. 2:24
You need to sign up for Treehouse in order to download course files.
Sign up