WEBVTT 1 00:00:01.400 --> 00:00:04.118 Let me now quickly, show you some of the stuff, 2 00:00:04.118 --> 00:00:06.853 that we just learned and practice. 3 00:00:08.300 --> 00:00:12.860 And so let's not build an extremely simple example. 4 00:00:12.860 --> 00:00:17.860 So I will start by simply logging test, start 5 00:00:18.140 --> 00:00:19.920 to the console. 6 00:00:19.920 --> 00:00:24.433 Then, afterwards I will create a set time out, 7 00:00:25.640 --> 00:00:29.650 with something that will just also lock something 8 00:00:29.650 --> 00:00:31.500 to the console only. 9 00:00:31.500 --> 00:00:33.943 So zero second timer. 10 00:00:34.930 --> 00:00:37.920 And so that's because we will fire this timer 11 00:00:37.920 --> 00:00:40.600 after exactly zero seconds. 12 00:00:40.600 --> 00:00:41.433 Okay. 13 00:00:41.433 --> 00:00:44.010 So basically this is a timer, 14 00:00:44.010 --> 00:00:46.830 which should call this timer function exactly 15 00:00:46.830 --> 00:00:48.890 after zero seconds. 16 00:00:48.890 --> 00:00:51.710 So what that means is that after zero seconds, 17 00:00:51.710 --> 00:00:56.433 this callback will be put on the callback queue, right? 18 00:00:57.350 --> 00:01:00.130 Then next up, let's build a promise 19 00:01:00.130 --> 00:01:01.743 that resolves immediately. 20 00:01:03.150 --> 00:01:05.070 So this is something that we will learn 21 00:01:05.070 --> 00:01:07.150 in the next video actually. 22 00:01:07.150 --> 00:01:10.223 And so for now, just follow what I'm writing here. 23 00:01:11.350 --> 00:01:14.210 So promise that resolve, basically allows us 24 00:01:14.210 --> 00:01:17.520 to build a promise, so to create a promise 25 00:01:17.520 --> 00:01:20.040 that is immediately resolved. 26 00:01:20.040 --> 00:01:23.690 So one that immediately has a success value. 27 00:01:23.690 --> 00:01:27.160 And so that fulfilled, success value, is gonna be this one 28 00:01:27.160 --> 00:01:28.740 we passed in here. 29 00:01:28.740 --> 00:01:32.760 So resolved, promise, one, 30 00:01:32.760 --> 00:01:35.893 and then we can handle that resolved promise. 31 00:01:36.910 --> 00:01:41.520 And so that, our response we can then simply log it 32 00:01:41.520 --> 00:01:42.353 to the console. 33 00:01:43.800 --> 00:01:46.224 So, just like in any other promise, 34 00:01:46.224 --> 00:01:48.730 we can handle it with a den method. 35 00:01:48.730 --> 00:01:51.510 And this callback function here, will get called with the 36 00:01:51.510 --> 00:01:54.340 resolved value, as an argument. 37 00:01:54.340 --> 00:01:55.930 And so in this case, 38 00:01:55.930 --> 00:01:59.680 the result value of that promise, is this one here that we 39 00:01:59.680 --> 00:02:00.773 just specified. 40 00:02:02.210 --> 00:02:07.210 And now just to finish, let's just log another string test. 41 00:02:07.650 --> 00:02:11.500 And, and so for now, that's actually it. 42 00:02:11.500 --> 00:02:15.370 So in what order do you think that these four messages, 43 00:02:15.370 --> 00:02:18.960 that we have here, will be logged to the console? 44 00:02:18.960 --> 00:02:22.610 And I want you to really think about this and maybe even 45 00:02:22.610 --> 00:02:24.933 pause the video, and write it down. 46 00:02:26.996 --> 00:02:29.730 Well, let's think about this together 47 00:02:29.730 --> 00:02:32.840 before we actually check out the result. 48 00:02:32.840 --> 00:02:35.970 So the first two messages that are gonna be printed 49 00:02:35.970 --> 00:02:37.840 should be pretty obvious, 50 00:02:37.840 --> 00:02:41.860 that's because we already know that any top level of coat. 51 00:02:41.860 --> 00:02:46.200 So coat outside of any callback, will run first. 52 00:02:46.200 --> 00:02:48.910 And so of course, the first two logs will come 53 00:02:48.910 --> 00:02:52.093 from these two synchronous, console dot log Sierra. 54 00:02:53.040 --> 00:02:56.800 But now between the timer, and the resolved promise here, 55 00:02:56.800 --> 00:02:59.300 it might be a little bit trickier. 56 00:02:59.300 --> 00:03:01.550 So both the timer and a promise, 57 00:03:01.550 --> 00:03:04.330 will finish at the exact same time. 58 00:03:04.330 --> 00:03:07.270 So both right after zero seconds. 59 00:03:07.270 --> 00:03:08.210 So the timer, 60 00:03:08.210 --> 00:03:12.760 because we told it to finish after zero seconds 61 00:03:12.760 --> 00:03:15.890 and a promise because we told it to immediately 62 00:03:15.890 --> 00:03:17.093 become resolved. 63 00:03:18.290 --> 00:03:19.123 Right? 64 00:03:19.123 --> 00:03:20.060 And so therefore, 65 00:03:20.060 --> 00:03:23.240 they will both finish at the exact same time. 66 00:03:23.240 --> 00:03:26.420 So which one do you think will be handled first 67 00:03:26.420 --> 00:03:27.460 or in other words, 68 00:03:27.460 --> 00:03:31.053 which of these two callbacks here will be executed first? 69 00:03:31.930 --> 00:03:35.300 Well, the timer appears first in the coat 70 00:03:35.300 --> 00:03:37.860 and so it kind of finished first. 71 00:03:37.860 --> 00:03:39.070 And so it's callback, 72 00:03:39.070 --> 00:03:42.908 will be put on the callback queue first, but does that mean 73 00:03:42.908 --> 00:03:46.154 that this call back here will be executed first? 74 00:03:46.154 --> 00:03:49.930 Well, actually, no, it doesn't. 75 00:03:49.930 --> 00:03:54.136 And that's because of the micro-tasks queue, remember? 76 00:03:54.136 --> 00:03:57.590 So the callback of the resolved promise here, 77 00:03:57.590 --> 00:04:02.190 so this one will be put on the micro-tasks queue and this 78 00:04:02.190 --> 00:04:05.630 micro-tasks queue, as you learned in the last video 79 00:04:05.630 --> 00:04:08.690 has priority over the callback queue. 80 00:04:08.690 --> 00:04:11.060 And so after this whole code runs, 81 00:04:11.060 --> 00:04:13.590 we will have one callback in a callback queue 82 00:04:13.590 --> 00:04:16.116 and one in a micro-tasks queue. 83 00:04:16.116 --> 00:04:19.750 And therefore the one from the micro tests queue 84 00:04:19.750 --> 00:04:21.600 should be executed first. 85 00:04:21.600 --> 00:04:25.720 And so therefore the callback from the micro-tasks queue 86 00:04:25.720 --> 00:04:28.210 should be executed first. 87 00:04:28.210 --> 00:04:31.640 And so that's this one here and there for the first message 88 00:04:31.640 --> 00:04:35.959 to appear of these two, should be resolved Promise one. 89 00:04:35.959 --> 00:04:37.490 All right. 90 00:04:37.490 --> 00:04:39.229 So the order in which they should appear 91 00:04:39.229 --> 00:04:44.229 is this tenders, tenders and finally the timer. 92 00:04:44.720 --> 00:04:49.690 And so that's now finally confirmed as, so I'm saving it 93 00:04:49.690 --> 00:04:53.869 and indeed did as exactly as expected. 94 00:04:53.869 --> 00:04:56.760 And so that's a relief actually. 95 00:04:56.760 --> 00:05:00.480 So what I told you in the last lecture is actually true. 96 00:05:00.480 --> 00:05:02.593 Now we proved it with coat. 97 00:05:03.440 --> 00:05:05.650 Now, remember that the implication 98 00:05:05.650 --> 00:05:08.630 of the fact that micro-tasks have priority 99 00:05:08.630 --> 00:05:11.590 over regular callbacks, is that if one of 100 00:05:11.590 --> 00:05:14.497 the micro-tasks takes a long time to run, 101 00:05:14.497 --> 00:05:18.797 then the timer will actually be delayed and not run after 102 00:05:18.797 --> 00:05:23.310 the zero seconds that we specified here, right? 103 00:05:23.310 --> 00:05:26.770 So instead it will run a little bit later just after 104 00:05:26.770 --> 00:05:30.420 the micro-task is actually done with its work. 105 00:05:30.420 --> 00:05:32.230 And so to finish this lecture, 106 00:05:32.230 --> 00:05:35.173 let's actually simulate what I just said. 107 00:05:36.530 --> 00:05:39.080 So here I will create another promise, 108 00:05:39.080 --> 00:05:41.373 that will immediately resolve. 109 00:05:46.230 --> 00:05:51.027 So let's just say resolved promise two, and then again, 110 00:05:51.910 --> 00:05:53.303 we can handle it here. 111 00:05:58.110 --> 00:06:00.673 And then as always, we want to log, 112 00:06:01.702 --> 00:06:04.140 the result to the console. 113 00:06:04.140 --> 00:06:05.640 But before we doing that, 114 00:06:05.640 --> 00:06:08.010 we actually want this callback function 115 00:06:08.010 --> 00:06:09.877 to have a really heavy task, 116 00:06:09.877 --> 00:06:12.770 which should take a lot of time. 117 00:06:12.770 --> 00:06:16.250 And so let's simulate that this callback takes a long time 118 00:06:16.250 --> 00:06:19.521 to run, by looping over a large number. 119 00:06:19.521 --> 00:06:23.120 So we can do the simulation simply, 120 00:06:23.120 --> 00:06:25.510 with an old school four loop. 121 00:06:25.510 --> 00:06:30.510 So let's start with I at zero and now I will loop 122 00:06:30.520 --> 00:06:34.819 all the way until one like very large number. 123 00:06:34.819 --> 00:06:39.163 Let's say this, and I will have to experiment a little bit. 124 00:06:40.220 --> 00:06:43.240 And for your computer, it might indeed be different. 125 00:06:43.240 --> 00:06:45.020 So if your computer is slower, 126 00:06:45.020 --> 00:06:46.873 maybe then you want a smaller number 127 00:06:46.873 --> 00:06:48.910 and maybe it's faster than mine. 128 00:06:48.910 --> 00:06:53.170 And then maybe a smaller number will be enough, right? 129 00:06:53.170 --> 00:06:55.260 I'm not sure if I said it correctly. 130 00:06:55.260 --> 00:06:57.415 So if your computer is slower than mine, 131 00:06:57.415 --> 00:07:01.453 then you will need a larger number, right? 132 00:07:02.480 --> 00:07:05.600 And so again, this line of code here will simulate 133 00:07:05.600 --> 00:07:08.570 that the callback function takes a long time. 134 00:07:08.570 --> 00:07:12.300 So really just this micro-task takes a long time. 135 00:07:12.300 --> 00:07:16.490 All right, it is not the asynchronous task itself. 136 00:07:16.490 --> 00:07:19.792 So the promise itself will still be resolved immediately, 137 00:07:19.792 --> 00:07:22.670 but then the micro-task that it contains, 138 00:07:22.670 --> 00:07:26.130 so that it puts on the micro-tasks queue. 139 00:07:26.130 --> 00:07:28.650 That's the one that will take a long time. 140 00:07:28.650 --> 00:07:29.970 And so by doing that, 141 00:07:29.970 --> 00:07:33.330 I can show you that the callbacks in the callback queue, 142 00:07:33.330 --> 00:07:36.680 just like this one here, will indeed be delayed 143 00:07:36.680 --> 00:07:39.178 and not run after zero seconds. 144 00:07:39.178 --> 00:07:41.253 So let's try this now, 145 00:07:42.400 --> 00:07:45.150 and you see it took a long time here 146 00:07:45.150 --> 00:07:48.620 until this lock appeared, right? 147 00:07:48.620 --> 00:07:51.630 So maybe we can have even a bigger number. 148 00:07:51.630 --> 00:07:54.660 And I hope that my computer is not going to explode, 149 00:07:54.660 --> 00:07:55.653 with this one. 150 00:07:56.511 --> 00:07:59.810 So you see that the page is kind of loading here 151 00:07:59.810 --> 00:08:01.933 and it's taking a lot of time. 152 00:08:02.790 --> 00:08:06.420 And so, actually now eventually it finished, 153 00:08:06.420 --> 00:08:10.460 but you see, that now only after all this work, 154 00:08:10.460 --> 00:08:14.450 the zero second timer message appeared on the screen. 155 00:08:14.450 --> 00:08:18.250 And so this is actual proof that these zero seconds 156 00:08:18.250 --> 00:08:21.080 that we have here are not a guarantee. 157 00:08:21.080 --> 00:08:22.420 Okay. 158 00:08:22.420 --> 00:08:25.400 And that is exactly what I wanted to show you. 159 00:08:25.400 --> 00:08:29.120 So this means, that you cannot really do high precision 160 00:08:29.120 --> 00:08:31.930 things using JavaScript timers. 161 00:08:31.930 --> 00:08:33.200 So just keep that in mind, 162 00:08:33.200 --> 00:08:36.042 whenever you are working with promises. 163 00:08:36.042 --> 00:08:37.823 So basically with micro-tasks, 164 00:08:37.823 --> 00:08:40.543 and with timers at the same time. 165 00:08:41.840 --> 00:08:42.990 Okay. 166 00:08:42.990 --> 00:08:45.110 Let's just remove the zero here, 167 00:08:45.110 --> 00:08:48.300 so that you don't explode your computer, 168 00:08:48.300 --> 00:08:51.623 but you still see that the effect is the same. 169 00:08:53.220 --> 00:08:56.150 All right, and that's actually enough for this video. 170 00:08:56.150 --> 00:08:59.189 I think I proved my point and demonstrated to the things 171 00:08:59.189 --> 00:09:02.420 that we just learned in the previous lecture. 172 00:09:02.420 --> 00:09:05.580 And so now we're ready to go back to some more practical 173 00:09:05.580 --> 00:09:08.881 aspects of asynchronous JavaScript, and that will be 174 00:09:08.881 --> 00:09:13.023 to create promises from scratch in the next video.