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.