1
00:00:00,820 --> 00:00:05,090
The setTimeout function only
runs the callback one time.

2
00:00:05,090 --> 00:00:09,310
There is another function will repeatedly
call a call back after a delay

3
00:00:09,310 --> 00:00:10,490
continually.

4
00:00:10,490 --> 00:00:13,240
And that's the setInterval function.

5
00:00:13,240 --> 00:00:15,710
Now that we're used to a one off timer,

6
00:00:15,710 --> 00:00:20,420
we're going to use a repeat timer
to build a clock like this.

7
00:00:20,420 --> 00:00:23,410
Open the workspace
accompanying this video.

8
00:00:23,410 --> 00:00:27,400
In the clock.js file there's
some JavaScript code already.

9
00:00:27,400 --> 00:00:32,130
First, let's select in this section
element with the ID of clock on the page

10
00:00:32,130 --> 00:00:35,860
and assigning it to
the clockSection variable.

11
00:00:35,860 --> 00:00:41,620
Then we have a getTime function that
formats some time from today's date.

12
00:00:41,620 --> 00:00:46,630
The getTime function represents
a string that represents the time.

13
00:00:46,630 --> 00:00:51,650
Finally we have the tickClock
function that displays the clock.

14
00:00:51,650 --> 00:00:58,352
Click on the preview and
you'll see the text clock goes here.

15
00:00:58,352 --> 00:01:04,462
Open up the developer tools and
you can call tickClock manually.

16
00:01:11,391 --> 00:01:16,997
Instead of me calling the tickClock
function over and over again myself I can

17
00:01:16,997 --> 00:01:22,175
use this set interval function to
execute the callback every second.

18
00:01:35,442 --> 00:01:39,030
Remember one second is 1,000 milliseconds.

19
00:01:40,500 --> 00:01:42,403
Save the clock and then preview.

20
00:01:44,621 --> 00:01:50,450
We see clock goes here for
one second, and then the clock ticks.

21
00:01:50,450 --> 00:01:57,830
This is because the set interval
function starts after the delay.

22
00:01:57,830 --> 00:02:00,230
And is not invoked immediately.

23
00:02:00,230 --> 00:02:04,730
To get around this, we can call the
tickClock function immediately ourselves

24
00:02:04,730 --> 00:02:11,370
when the page loads, and then let the
setInterval do it every second afterwards.

25
00:02:11,370 --> 00:02:14,150
Okay, I have another challenge for you.

26
00:02:14,150 --> 00:02:15,360
Can you try and

27
00:02:15,360 --> 00:02:20,890
use an anonymous function with these
set interval in the clock application.

28
00:02:20,890 --> 00:02:24,650
If you try and can't, can you explain why?

29
00:02:24,650 --> 00:02:27,470
I'll share with you my thoughts and
the solution next.