WEBVTT 1 00:00:01.160 --> 00:00:02.930 To finish the section, 2 00:00:02.930 --> 00:00:06.600 let's quickly talk about timers in JavaScript. 3 00:00:06.600 --> 00:00:09.550 And we have two kinds of timers. 4 00:00:09.550 --> 00:00:13.200 First, the set timeout timer runs just once, 5 00:00:13.200 --> 00:00:17.010 after a defined time, while the set interval timer 6 00:00:17.010 --> 00:00:20.683 keeps running basically forever, until we stop it. 7 00:00:22.060 --> 00:00:26.450 So basically, we can use set timeout to execute some code 8 00:00:26.450 --> 00:00:28.780 at some point in the future. 9 00:00:28.780 --> 00:00:33.070 So let's use this to simulate ordering a pizza. 10 00:00:33.070 --> 00:00:34.940 So when we order a pizza, 11 00:00:34.940 --> 00:00:38.300 it doesn't arrive right away, right? 12 00:00:38.300 --> 00:00:40.360 So instead, it's gonna take some time. 13 00:00:40.360 --> 00:00:42.073 And we can simulate that. 14 00:00:43.150 --> 00:00:47.210 So let's write set, timeout. 15 00:00:47.210 --> 00:00:50.530 And then this function receives a callback function. 16 00:00:50.530 --> 00:00:54.730 So just like some array methods, or dumb event handlers, 17 00:00:54.730 --> 00:00:57.840 right, and we already talked a lot about this. 18 00:00:57.840 --> 00:01:02.070 And I think we even used the set timeout function here, 19 00:01:02.070 --> 00:01:06.150 as an example of callback functions a bit earlier, right? 20 00:01:06.150 --> 00:01:09.053 So let's use an arrow function this time, actually. 21 00:01:11.990 --> 00:01:13.293 Because why not? 22 00:01:14.340 --> 00:01:19.340 And so here, let's just say, here is your pizza. 23 00:01:20.130 --> 00:01:22.513 And then just some pizza emoji here, maybe. 24 00:01:25.200 --> 00:01:26.033 All right? 25 00:01:27.400 --> 00:01:30.377 So this callback function here is the first argument 26 00:01:30.377 --> 00:01:32.520 of the set timeout function. 27 00:01:32.520 --> 00:01:36.300 And so again, we do not call this function ourselves, 28 00:01:36.300 --> 00:01:39.360 we simply pass in this function as an argument 29 00:01:39.360 --> 00:01:41.190 to set timeout. 30 00:01:41.190 --> 00:01:43.680 And it is this function, who will then call 31 00:01:43.680 --> 00:01:46.360 or callback function in the future. 32 00:01:46.360 --> 00:01:48.653 And when does that future arrive? 33 00:01:49.490 --> 00:01:54.270 Well, that's what we specify here in the second argument. 34 00:01:54.270 --> 00:01:57.270 So here, we pass in the amount of milliseconds, 35 00:01:57.270 --> 00:02:00.053 that will pass until this function is called. 36 00:02:00.980 --> 00:02:03.370 So let's say we want to call this function 37 00:02:03.370 --> 00:02:07.263 after three seconds and so we need to pass 3000. 38 00:02:08.880 --> 00:02:11.550 So one second is 1000 milliseconds. 39 00:02:11.550 --> 00:02:14.913 And so this is basically three times 1000. 40 00:02:15.930 --> 00:02:18.030 Okay, so let's 41 00:02:19.390 --> 00:02:20.870 give it a save. 42 00:02:20.870 --> 00:02:22.740 And you see the page, reload it. 43 00:02:22.740 --> 00:02:25.490 And now after three seconds have passed, 44 00:02:25.490 --> 00:02:28.820 we get this log to the console, okay. 45 00:02:28.820 --> 00:02:29.910 And so with this, 46 00:02:29.910 --> 00:02:34.910 we really delayed calling this function here, right? 47 00:02:35.500 --> 00:02:38.560 Yeah, by exactly three seconds. 48 00:02:38.560 --> 00:02:42.530 And we can also say that we schedule this function call 49 00:02:42.530 --> 00:02:46.320 for three seconds later, all right. 50 00:02:46.320 --> 00:02:49.140 Now, what's really important to realize here 51 00:02:49.140 --> 00:02:53.403 is that the code execution does not stop here at this point. 52 00:02:54.440 --> 00:02:58.120 All right, so when the execution of our code 53 00:02:58.120 --> 00:03:00.840 reaches this point, it will simply call 54 00:03:00.840 --> 00:03:02.860 the set timeout function, 55 00:03:02.860 --> 00:03:05.290 it will then essentially register 56 00:03:05.290 --> 00:03:08.110 this callback function here to be called later. 57 00:03:08.110 --> 00:03:11.480 And then the code execution simply continues. 58 00:03:11.480 --> 00:03:14.080 And we can prove that by doing something 59 00:03:14.080 --> 00:03:16.210 after the set timeout. 60 00:03:16.210 --> 00:03:17.773 So let's say waiting. 61 00:03:21.310 --> 00:03:24.490 And if we now save this, then immediately we will see 62 00:03:24.490 --> 00:03:26.470 this waiting in the console. 63 00:03:26.470 --> 00:03:31.070 So let's check that and indeed, we get waiting. 64 00:03:31.070 --> 00:03:33.411 And then after the three seconds, 65 00:03:33.411 --> 00:03:35.293 then this lock here appeared. 66 00:03:36.170 --> 00:03:40.210 All right, so this is really important to understand. 67 00:03:40.210 --> 00:03:44.300 So again, as soon as JavaScript hits this line of code here, 68 00:03:44.300 --> 00:03:47.310 it will simply basically keep counting the time 69 00:03:47.310 --> 00:03:50.730 in the background, and register this callback function 70 00:03:50.730 --> 00:03:54.320 to be called after that time has elapsed, 71 00:03:54.320 --> 00:03:57.180 and then immediately, JavaScript will move on 72 00:03:57.180 --> 00:04:00.950 to the next line, which is this one, all right. 73 00:04:00.950 --> 00:04:04.490 And this mechanism is called Asynchronous JavaScript. 74 00:04:04.490 --> 00:04:07.580 And we will talk about how exactly all of this works 75 00:04:07.580 --> 00:04:10.270 behind the scenes in a special section 76 00:04:10.270 --> 00:04:13.100 just about Asynchronous JavaScript. 77 00:04:13.100 --> 00:04:17.490 Okay, but anyway, what if we now needed to pass 78 00:04:17.490 --> 00:04:20.960 some arguments into this function here? 79 00:04:20.960 --> 00:04:23.210 It's not that simple, right? 80 00:04:23.210 --> 00:04:26.720 Because we are not calling this function ourselves. 81 00:04:26.720 --> 00:04:30.230 So we are not using the parenthesis like this 82 00:04:30.230 --> 00:04:33.350 and so therefore, we cannot pass in any arguments 83 00:04:33.350 --> 00:04:34.373 into the function. 84 00:04:36.067 --> 00:04:41.067 All right, now, however, the D set timeout function here 85 00:04:41.210 --> 00:04:43.770 actually has a solution for that. 86 00:04:43.770 --> 00:04:45.500 And it works like this 87 00:04:45.500 --> 00:04:48.630 so basically, all the arguments here that we pass 88 00:04:48.630 --> 00:04:52.440 after the delay will be arguments to the function. 89 00:04:52.440 --> 00:04:54.223 So let me demonstrate that to you. 90 00:04:55.720 --> 00:04:58.930 So let's say here, olives 91 00:04:58.930 --> 00:05:01.903 and then another argument spinach. 92 00:05:02.780 --> 00:05:06.223 And so here, I can now specify the ingredients. 93 00:05:07.480 --> 00:05:11.860 So olives and spinach will be ingredients in our pizza. 94 00:05:11.860 --> 00:05:14.943 So let's say ingredient one, and ingredient two. 95 00:05:16.020 --> 00:05:19.323 And here we can then use them somehow. 96 00:05:20.570 --> 00:05:22.320 Let's make this a template literal. 97 00:05:23.460 --> 00:05:25.543 (typing) 98 00:05:31.120 --> 00:05:33.130 Let's give it a save here 99 00:05:33.130 --> 00:05:36.210 and so the waiting once again appeared immediately. 100 00:05:36.210 --> 00:05:37.900 And then after three seconds 101 00:05:37.900 --> 00:05:41.040 or string, appear to log to the console. 102 00:05:41.040 --> 00:05:44.690 And indeed, this third argument that we passed in, 103 00:05:44.690 --> 00:05:47.080 did not become the first argument, 104 00:05:47.080 --> 00:05:49.580 or the first parameter of our function here. 105 00:05:49.580 --> 00:05:53.420 And then the fourth argument became this second one. 106 00:05:53.420 --> 00:05:55.240 And if we passed an even more, 107 00:05:55.240 --> 00:05:57.040 we could then get access to them 108 00:05:57.040 --> 00:05:59.910 here in this callback function. 109 00:05:59.910 --> 00:06:03.690 All right that is essentially how the set timeout function 110 00:06:03.690 --> 00:06:06.880 here works, there's just one more detail 111 00:06:06.880 --> 00:06:08.310 that I want to show you, 112 00:06:08.310 --> 00:06:12.340 which is the fact that we can actually cancel the timer, 113 00:06:12.340 --> 00:06:15.700 at least until the delay has actually passed. 114 00:06:15.700 --> 00:06:19.050 So before these three seconds here have passed, 115 00:06:19.050 --> 00:06:21.720 we can cancel the timeout. 116 00:06:21.720 --> 00:06:23.780 And so let me show you how. 117 00:06:23.780 --> 00:06:25.170 Now to build this example, 118 00:06:25.170 --> 00:06:27.913 I first want to change something here. 119 00:06:29.070 --> 00:06:32.480 So I want to put the ingredients into an array. 120 00:06:32.480 --> 00:06:34.563 (typing) 121 00:06:37.350 --> 00:06:40.053 So let's say again, olives, 122 00:06:43.610 --> 00:06:47.030 and spinach and so how would we then pass in 123 00:06:47.030 --> 00:06:48.453 these ingredients here? 124 00:06:49.960 --> 00:06:53.060 We're not gonna do ingredients, 125 00:06:53.060 --> 00:06:57.300 zero and ingredients one, like this, right? 126 00:06:57.300 --> 00:07:01.120 Now, instead, we will spread the array here 127 00:07:01.120 --> 00:07:03.060 using the spread operator 128 00:07:03.060 --> 00:07:06.250 and so this will then take the elements out of the array 129 00:07:06.250 --> 00:07:09.720 and put them here, basically comma separated. 130 00:07:09.720 --> 00:07:11.873 And so this now works exactly the same. 131 00:07:13.500 --> 00:07:16.080 But now what I want to do here is to say 132 00:07:16.080 --> 00:07:18.173 that if the ingredients include spinach, 133 00:07:19.110 --> 00:07:21.760 because that's something that many people don't like. 134 00:07:23.150 --> 00:07:26.060 So if the ingredients include spinach, 135 00:07:26.060 --> 00:07:29.323 then, clear timeout. 136 00:07:30.330 --> 00:07:34.400 And so now here, we need to pass in the name of the timer. 137 00:07:34.400 --> 00:07:38.883 And so we can basically assign this timer to a variable. 138 00:07:41.570 --> 00:07:42.943 So let's say simply, 139 00:07:44.250 --> 00:07:45.373 let's say pizza, 140 00:07:47.330 --> 00:07:48.163 timer. 141 00:07:49.270 --> 00:07:51.433 And so here, we can then use that variable. 142 00:07:53.400 --> 00:07:57.150 So that timer to clear it, all right. 143 00:07:57.150 --> 00:08:00.740 So again, here, we basically stored the result 144 00:08:00.740 --> 00:08:02.700 of the set timeout function, 145 00:08:02.700 --> 00:08:04.780 which is essentially the timer. 146 00:08:04.780 --> 00:08:08.790 And then we can use that variable to clear the timeout. 147 00:08:08.790 --> 00:08:10.880 And then we can use that variable 148 00:08:10.880 --> 00:08:13.060 to basically delete the timer. 149 00:08:13.060 --> 00:08:15.890 And for that, we use clear timeout. 150 00:08:15.890 --> 00:08:20.624 And so now since this array contains this spinach here, 151 00:08:20.624 --> 00:08:23.370 now you will not see the pizza string here 152 00:08:23.370 --> 00:08:26.020 printed to the console, all right. 153 00:08:26.020 --> 00:08:27.823 But if it did not include spinach, 154 00:08:29.740 --> 00:08:33.453 then of course, it would still work after three seconds. 155 00:08:35.210 --> 00:08:40.210 All right, so this is how the set timeout function works. 156 00:08:40.420 --> 00:08:42.040 And that's actually it, 157 00:08:42.040 --> 00:08:45.490 that's all you need to know about the set timeout function. 158 00:08:45.490 --> 00:08:48.400 It's pretty straightforward, right? 159 00:08:48.400 --> 00:08:51.640 So let's now actually go back to our application, 160 00:08:51.640 --> 00:08:56.640 and implement the timer to simulate the approval of a loan. 161 00:08:56.800 --> 00:09:01.800 Okay, so when we click this button here to request a loan, 162 00:09:02.170 --> 00:09:04.663 then we get the value immediately right now. 163 00:09:05.990 --> 00:09:08.740 But typically, a bank takes some time, 164 00:09:08.740 --> 00:09:12.950 like some days or some weeks to approve that loan. 165 00:09:12.950 --> 00:09:14.940 And so let's simulate that here 166 00:09:14.940 --> 00:09:18.460 by taking like two or three seconds. 167 00:09:18.460 --> 00:09:22.060 So what happens when we successfully request a loan 168 00:09:22.060 --> 00:09:25.460 is essentially this code here, right. 169 00:09:25.460 --> 00:09:29.480 And so let's simply wrap all this code into a function. 170 00:09:29.480 --> 00:09:30.823 So curly braces, 171 00:09:33.640 --> 00:09:35.703 then function just like this, 172 00:09:36.630 --> 00:09:39.473 and then put all of this into a set timeout. 173 00:09:43.730 --> 00:09:44.563 And then 174 00:09:46.000 --> 00:09:48.580 down here, give it a safe 175 00:09:48.580 --> 00:09:52.030 and then it would be nicely formatted. 176 00:09:52.030 --> 00:09:53.890 Now, okay, and now let's say 177 00:09:54.970 --> 00:09:56.763 well after two and a half seconds, 178 00:09:58.300 --> 00:10:02.913 okay, and so let's just see what it looks like in practice. 179 00:10:06.890 --> 00:10:09.313 So requesting a loan of 1000. 180 00:10:11.400 --> 00:10:13.900 And so now it's gonna take two and a half seconds. 181 00:10:14.760 --> 00:10:18.173 And indeed, the bank just approved my loan here. 182 00:10:19.010 --> 00:10:21.090 So that was 10,000. 183 00:10:21.090 --> 00:10:24.283 Let's do something else, so count the seconds here. 184 00:10:25.180 --> 00:10:27.980 And now my loan was approved, 185 00:10:27.980 --> 00:10:30.460 and so then it appeared here in the movements. 186 00:10:30.460 --> 00:10:33.920 And it also appeared here in the balance, 187 00:10:33.920 --> 00:10:35.430 you saw that? 188 00:10:35.430 --> 00:10:39.260 So that makes our application a little bit more realistic. 189 00:10:39.260 --> 00:10:40.490 But let's go back now, 190 00:10:40.490 --> 00:10:44.240 because we also need to talk about set interval. 191 00:10:44.240 --> 00:10:46.853 So we learned that set timeout here, 192 00:10:48.404 --> 00:10:52.250 simply schedules a function to run after 193 00:10:52.250 --> 00:10:54.270 a certain amount of time, 194 00:10:54.270 --> 00:10:57.890 but the callback function is only executed once. 195 00:10:57.890 --> 00:11:00.370 Now, what if we wanted to run a function 196 00:11:00.370 --> 00:11:04.050 over and over again, like every five seconds, 197 00:11:04.050 --> 00:11:06.150 or every 10 minutes? 198 00:11:06.150 --> 00:11:09.693 Well, for that, we have the set timeout function. 199 00:11:11.720 --> 00:11:13.893 So this one is gonna be set timeout. 200 00:11:15.560 --> 00:11:18.130 So let's use the set timeout function 201 00:11:18.130 --> 00:11:20.330 to basically create a clock 202 00:11:20.330 --> 00:11:22.823 that will display in our console. 203 00:11:23.960 --> 00:11:28.960 So set timeout, and then a function, 204 00:11:29.770 --> 00:11:32.910 and of course, I could have used an arrow function, 205 00:11:32.910 --> 00:11:34.923 but it doesn't really matter here. 206 00:11:35.930 --> 00:11:39.283 So our callback function, and let's create a new date here. 207 00:11:41.420 --> 00:11:42.993 So let's say now, 208 00:11:43.980 --> 00:11:45.313 and then new date. 209 00:11:47.310 --> 00:11:50.410 Okay, so this is nothing new at this point. 210 00:11:50.410 --> 00:11:52.520 And then let's just log that date 211 00:11:52.520 --> 00:11:54.913 so that current date to the console. 212 00:11:56.020 --> 00:11:59.663 And we want to execute this every one second. 213 00:12:00.790 --> 00:12:02.593 And so here we say one second. 214 00:12:03.800 --> 00:12:08.520 So let's see what happens and indeed, once every second now, 215 00:12:08.520 --> 00:12:10.510 this should be executed, 216 00:12:10.510 --> 00:12:11.890 but it doesn't 217 00:12:11.890 --> 00:12:14.690 and that's because I made the mistake 218 00:12:14.690 --> 00:12:17.270 of calling set timeout again. 219 00:12:17.270 --> 00:12:20.160 But of course, as I was saying all the time, 220 00:12:20.160 --> 00:12:22.633 this one is actually called set interval. 221 00:12:25.050 --> 00:12:27.603 So maybe you were already spotting this mistake. 222 00:12:28.460 --> 00:12:30.010 But now let's see what happens. 223 00:12:30.900 --> 00:12:33.550 So now after each second here, 224 00:12:33.550 --> 00:12:37.220 we get the current time displayed to the console. 225 00:12:37.220 --> 00:12:40.410 So what's happening here is that this callback function 226 00:12:40.410 --> 00:12:43.350 is now executing every second. 227 00:12:43.350 --> 00:12:45.100 Okay, so every second, 228 00:12:45.100 --> 00:12:47.240 a new date is created here, 229 00:12:47.240 --> 00:12:49.263 and is then logged to the console. 230 00:12:50.370 --> 00:12:54.430 And of course, we could also say, every three seconds, 231 00:12:54.430 --> 00:12:58.360 and then we would get the current time on the console, 232 00:12:58.360 --> 00:12:59.593 every three seconds. 233 00:13:01.250 --> 00:13:04.313 You see, so it's adding three seconds each time now. 234 00:13:05.610 --> 00:13:09.000 But one second here makes it a little bit more sense. 235 00:13:09.000 --> 00:13:11.370 Now, of course, you could print a real clock 236 00:13:13.070 --> 00:13:14.570 using this function now, 237 00:13:14.570 --> 00:13:18.050 like you could get the current hour, minutes and seconds 238 00:13:18.050 --> 00:13:20.870 from this now, date. 239 00:13:20.870 --> 00:13:23.500 And so I would challenge you to do that actually, 240 00:13:23.500 --> 00:13:28.280 to take a minute or two in order to build like a real clock. 241 00:13:28.280 --> 00:13:32.190 That is only logging the hours, minutes and seconds here 242 00:13:32.190 --> 00:13:33.750 to the console. 243 00:13:33.750 --> 00:13:35.430 Now I'm not gonna do that here. 244 00:13:35.430 --> 00:13:37.500 But I think this would be a nice challenge 245 00:13:37.500 --> 00:13:40.368 to train a little bit the stuff that we've been using 246 00:13:40.368 --> 00:13:42.800 previously in the section. 247 00:13:42.800 --> 00:13:46.360 But for now, this is actually enough for this video. 248 00:13:46.360 --> 00:13:49.080 So take this challenge that I just mentioned, 249 00:13:49.080 --> 00:13:51.523 and then I'll see you soon in the next video.