1
00:00:00,760 --> 00:00:04,280
In the last video you learned that
a JavaScript function can be passed into

2
00:00:04,280 --> 00:00:05,260
another function.

3
00:00:05,260 --> 00:00:07,930
So let's look at why this
can be a useful thing to do.

4
00:00:07,930 --> 00:00:11,710
Let's say that, for example, we want
to delay the execution of the anonymous

5
00:00:11,710 --> 00:00:13,810
function we wrote in the last video.

6
00:00:13,810 --> 00:00:15,660
Let's delay it by three seconds.

7
00:00:15,660 --> 00:00:20,440
Well the window object has a method called
setTimeout that we can use for this.

8
00:00:20,440 --> 00:00:23,790
Let's hop over to MDN and
see how to use this function.

9
00:00:23,790 --> 00:00:27,280
So here under Syntax,
we can see the method signature.

10
00:00:27,280 --> 00:00:34,440
And there are two forms, one which expects
func, and another which expects a code.

11
00:00:34,440 --> 00:00:37,360
Now, looking below at
the explanation of these parameters,

12
00:00:37,360 --> 00:00:40,050
it says that code is not recommended.

13
00:00:40,050 --> 00:00:43,370
So we'll go ahead and
stick with the first form.

14
00:00:43,370 --> 00:00:48,100
So the method expects a function
to be the first parameter and

15
00:00:48,100 --> 00:00:51,190
an integer, which will represent
the delay in milliseconds.

16
00:00:51,190 --> 00:00:54,930
And after that we can pass in any
arguments we want the function to receive

17
00:00:54,930 --> 00:00:57,040
when it finally executes.

18
00:00:57,040 --> 00:01:00,900
Now what about this var
timeout portion here?

19
00:01:00,900 --> 00:01:06,560
Well, this is just showing that
setTimeout returns a timeoutID value,

20
00:01:06,560 --> 00:01:09,940
as described here in
the Return value section.

21
00:01:09,940 --> 00:01:13,630
So you can use this to cancel
the function before it executes, but

22
00:01:13,630 --> 00:01:15,480
we won't need this for our purposes.

23
00:01:15,480 --> 00:01:22,720
So let's switch back to temp.js, and
delete the exec function all together.

24
00:01:22,720 --> 00:01:30,475
And we'll replace exec here
with window.setTimeout.

25
00:01:30,475 --> 00:01:34,710
So here we're passing in
the function as our first argument.

26
00:01:34,710 --> 00:01:36,610
And this is known as a callback function,

27
00:01:36,610 --> 00:01:41,030
because we want to call it back after
a certain amount of time has passed.

28
00:01:41,030 --> 00:01:43,060
And we're going to set
it to three seconds.

29
00:01:43,060 --> 00:01:48,850
So to set the time,
we'll pass 3,000 as the second argument,

30
00:01:48,850 --> 00:01:51,900
because that's how many
milliseconds are in three seconds.

31
00:01:51,900 --> 00:01:56,290
And we can leave this third argument
as is, because we still want the string

32
00:01:56,290 --> 00:02:00,000
Greeting, everyone to be passed to our
anonymous function when it's called.

33
00:02:00,000 --> 00:02:03,550
Right, so let's save this and
see it in the browser.

34
00:02:03,550 --> 00:02:08,100
I'll go ahead and
refresh, and there we go.

35
00:02:08,100 --> 00:02:11,610
After three seconds,
the callback function was fired, and

36
00:02:11,610 --> 00:02:14,080
Greetings, everyone was
output to the console.

37
00:02:15,460 --> 00:02:18,600
So let's take a step back and
think about what we've done here.

38
00:02:18,600 --> 00:02:21,500
We just handed control of an action

39
00:02:21,500 --> 00:02:24,930
over to another function to be
triggered in response to an event.

40
00:02:24,930 --> 00:02:28,640
In this case,
the event was those three seconds passed.

41
00:02:28,640 --> 00:02:33,410
But we can also set callback functions to
trigger when other events take place, and

42
00:02:33,410 --> 00:02:34,710
you'll learn how to do that next.