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.