Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,440 --> 00:00:05,400 Welcome back to the last lecture of the section. 2 2 00:00:05,400 --> 00:00:07,680 And so in this one, we're gonna apply 3 3 00:00:07,680 --> 00:00:09,230 everything that we learned 4 4 00:00:09,230 --> 00:00:13,093 in the last few videos to Coding Challenge #3. 5 5 00:00:14,580 --> 00:00:18,200 And this coding challenge basically has two part. 6 6 00:00:18,200 --> 00:00:20,390 So in the first part, I want you to write 7 7 00:00:20,390 --> 00:00:23,560 an async function called loadNPause, 8 8 00:00:23,560 --> 00:00:26,663 which will basically recreate Coding Challenge #2, 9 9 00:00:27,560 --> 00:00:30,420 but this time using async/await. 10 10 00:00:30,420 --> 00:00:33,150 And so of course, that is only about the part 11 11 00:00:33,150 --> 00:00:36,230 where we actually consume the promise. 12 12 00:00:36,230 --> 00:00:39,640 Then you can compare the two versions that you have 13 13 00:00:39,640 --> 00:00:42,070 and think about the big differences 14 14 00:00:42,070 --> 00:00:44,183 and also see which one you like more. 15 15 00:00:45,320 --> 00:00:46,900 Now in order to do this, 16 16 00:00:46,900 --> 00:00:51,423 don't forget to set your network tab to Fast 3G. 17 17 00:00:52,910 --> 00:00:54,000 Alright? 18 18 00:00:54,000 --> 00:00:55,660 So that's part number one, 19 19 00:00:55,660 --> 00:00:58,750 basically converting what we did before, 20 20 00:00:58,750 --> 00:01:00,860 but then comes part number two, 21 21 00:01:00,860 --> 00:01:03,360 which is again a more difficult one. 22 22 00:01:03,360 --> 00:01:06,030 And actually in this one, you will do something 23 23 00:01:06,030 --> 00:01:07,890 that we didn't do before, 24 24 00:01:07,890 --> 00:01:10,790 but I'm sure that with the instructions here, 25 25 00:01:10,790 --> 00:01:12,630 you can make it. 26 26 00:01:12,630 --> 00:01:14,310 So, what I want you to do 27 27 00:01:14,310 --> 00:01:17,535 is to create an async function loadAll, 28 28 00:01:17,535 --> 00:01:21,120 and this one receives an array of image path, 29 29 00:01:21,120 --> 00:01:22,920 and so that's this one. 30 30 00:01:22,920 --> 00:01:25,400 So it's an array which contains the path 31 31 00:01:25,400 --> 00:01:30,380 of all three images in the image folder, okay? 32 32 00:01:30,380 --> 00:01:34,397 So you receive debt array in the function 33 33 00:01:34,397 --> 00:01:37,020 and then I want you to use the map method 34 34 00:01:37,020 --> 00:01:41,400 to loop over the array in order to load all the images 35 35 00:01:41,400 --> 00:01:44,993 that are here in this array with the createImage function. 36 36 00:01:46,070 --> 00:01:50,483 So this one here where we promise a fight, loading an image. 37 37 00:01:51,750 --> 00:01:53,280 Okay? 38 38 00:01:53,280 --> 00:01:57,020 Of course the map method will then result in a new array 39 39 00:01:57,020 --> 00:02:00,820 and you should call this one images like this. 40 40 00:02:00,820 --> 00:02:03,630 Now keep in mind that createImage here 41 41 00:02:03,630 --> 00:02:05,560 will return a promise. 42 42 00:02:05,560 --> 00:02:08,490 And so the callback function of the map method 43 43 00:02:08,490 --> 00:02:10,530 needs to be special. 44 44 00:02:10,530 --> 00:02:13,020 So you need to consume the promise 45 45 00:02:13,020 --> 00:02:15,290 that comes from createImage 46 46 00:02:15,290 --> 00:02:17,810 and so therefore, as I said 47 47 00:02:17,810 --> 00:02:20,070 the callback function in the map method 48 48 00:02:20,070 --> 00:02:22,560 should be a special type of function. 49 49 00:02:22,560 --> 00:02:25,640 So I'm not spoiling which function it is, 50 50 00:02:25,640 --> 00:02:29,200 but hopefully you can guess what I'm talking about. 51 51 00:02:29,200 --> 00:02:30,550 Alright? 52 52 00:02:30,550 --> 00:02:33,670 But anyway, next I want you to check out 53 53 00:02:33,670 --> 00:02:36,170 this images array in the console 54 54 00:02:36,170 --> 00:02:38,633 and is it what you expected? 55 55 00:02:39,560 --> 00:02:41,750 So again, here I want you to think 56 56 00:02:41,750 --> 00:02:44,350 about the results that you get. 57 57 00:02:44,350 --> 00:02:46,490 So these images array, 58 58 00:02:46,490 --> 00:02:49,390 and think if you expected it to be like this, 59 59 00:02:49,390 --> 00:02:51,103 and also if it makes sense, 60 60 00:02:52,850 --> 00:02:53,683 okay? 61 61 00:02:53,683 --> 00:02:57,230 And what I just said will make sense once you get there. 62 62 00:02:57,230 --> 00:02:59,500 Then in the next step, you should use 63 63 00:02:59,500 --> 00:03:01,740 a promise combinator function 64 64 00:03:01,740 --> 00:03:05,120 to actually get the images from the array. 65 65 00:03:05,120 --> 00:03:08,810 So this is a very important hint right there. 66 66 00:03:08,810 --> 00:03:12,280 line:15% Then finally, you should also add the parallel class 67 67 00:03:12,280 --> 00:03:14,100 line:15% to all the images. 68 68 00:03:14,100 --> 00:03:18,230 line:15% And so once again, you should probably loop over the images 69 69 00:03:18,230 --> 00:03:21,560 line:15% and then to each of them add to this class. 70 70 00:03:21,560 --> 00:03:23,720 line:15% So again, this part two here 71 71 00:03:23,720 --> 00:03:26,130 actually contains some new parts 72 72 00:03:26,130 --> 00:03:28,610 that you will have to figure out on your own 73 73 00:03:28,610 --> 00:03:31,200 and experiment a little bit with that. 74 74 00:03:31,200 --> 00:03:33,190 But at this point of the course, 75 75 00:03:33,190 --> 00:03:35,920 so already pretty deep into it, 76 76 00:03:35,920 --> 00:03:39,050 it's probably a good idea that you start experimenting 77 77 00:03:39,050 --> 00:03:41,140 with some stuff on your own. 78 78 00:03:41,140 --> 00:03:44,470 And so that's why I created this challenge like this. 79 79 00:03:44,470 --> 00:03:47,870 So good luck with this take all the time that you need 80 80 00:03:47,870 --> 00:03:49,973 line:15% and then I see you back here. 81 81 00:03:53,960 --> 00:03:58,590 line:15% Welcome back here to my solution now. 82 82 00:03:58,590 --> 00:04:01,210 So as you see, I already have all the code here 83 83 00:04:01,210 --> 00:04:02,430 from Challenge #2 84 84 00:04:03,340 --> 00:04:06,170 and so what we're going to change now is 85 85 00:04:06,170 --> 00:04:08,190 basically this part here. 86 86 00:04:08,190 --> 00:04:12,460 So we will recreate this big then chain 87 87 00:04:12,460 --> 00:04:14,093 using now async/await. 88 88 00:04:14,970 --> 00:04:17,303 So the function is called loadNPause, 89 89 00:04:20,600 --> 00:04:24,820 and it is an async function which doesn't have any arguments 90 90 00:04:26,040 --> 00:04:27,643 or missing to function keywords. 91 91 00:04:28,600 --> 00:04:30,850 So it doesn't have any arguments 92 92 00:04:30,850 --> 00:04:32,480 and so as always, 93 93 00:04:32,480 --> 00:04:35,630 we need to wrap everything into a try block 94 94 00:04:38,720 --> 00:04:41,220 and in here here, the error. 95 95 00:04:41,220 --> 00:04:44,070 And actually right now it is already allowed 96 96 00:04:44,070 --> 00:04:47,240 to use catch without the error. 97 97 00:04:47,240 --> 00:04:50,950 So that's new in JavaScript previously that wasn't allowed, 98 98 00:04:50,950 --> 00:04:54,730 but just to make it consistent, I always used to error here, 99 99 00:04:54,730 --> 00:04:56,963 even if I then don't need it. 100 100 00:04:57,800 --> 00:05:01,980 But here let's just log it to the console as always. 101 101 00:05:01,980 --> 00:05:03,200 Alright. 102 102 00:05:03,200 --> 00:05:05,900 So here is the first promise. 103 103 00:05:05,900 --> 00:05:07,660 So this one... 104 104 00:05:07,660 --> 00:05:10,170 So let's put that here 105 105 00:05:10,170 --> 00:05:12,540 and since we're using async/await, 106 106 00:05:12,540 --> 00:05:15,080 I will now await that promise 107 107 00:05:15,080 --> 00:05:18,340 and store the results into image. 108 108 00:05:18,340 --> 00:05:21,300 So that's basically the variable that we have here 109 109 00:05:21,300 --> 00:05:24,510 as the barometer in the then method. 110 110 00:05:24,510 --> 00:05:27,793 And so that's the same name that makes sense here. 111 111 00:05:28,830 --> 00:05:29,930 So image, 112 112 00:05:29,930 --> 00:05:34,150 and let's use one here because we're gonna have multiple 113 113 00:05:34,150 --> 00:05:36,510 or actually that's not even necessary 114 114 00:05:36,510 --> 00:05:40,093 because this time we won't need the currentImg variable, 115 115 00:05:41,650 --> 00:05:42,483 okay? 116 116 00:05:42,483 --> 00:05:45,870 But more about that once we reach that point. 117 117 00:05:45,870 --> 00:05:50,180 So again, the image is of course, the result of this 118 118 00:05:50,180 --> 00:05:52,160 successful promise. 119 119 00:05:52,160 --> 00:05:52,993 Alright? 120 120 00:05:52,993 --> 00:05:56,390 And so with that, we already translated this year. 121 121 00:05:56,390 --> 00:06:00,943 Now what we is to simply log this to the console. 122 122 00:06:03,140 --> 00:06:07,203 And so here we have Load image 1 already. 123 123 00:06:08,390 --> 00:06:10,933 Then next up we have this wait. 124 124 00:06:12,520 --> 00:06:17,340 And so here we can just await for wait 2. 125 125 00:06:18,460 --> 00:06:19,870 And just like before, 126 126 00:06:19,870 --> 00:06:23,400 since the weight promise does not have any resolved value, 127 127 00:06:23,400 --> 00:06:27,253 we actually don't need to save anything to any variable. 128 128 00:06:28,230 --> 00:06:30,350 So here we basically just pass 129 129 00:06:30,350 --> 00:06:32,910 the execution for two seconds, 130 130 00:06:32,910 --> 00:06:35,053 and then what we want to do is this, 131 131 00:06:36,590 --> 00:06:38,380 but not exactly this, 132 132 00:06:38,380 --> 00:06:40,600 because now instead of current image, 133 133 00:06:40,600 --> 00:06:43,290 we can use simply image. 134 134 00:06:43,290 --> 00:06:45,200 And that's because now we are 135 135 00:06:45,200 --> 00:06:47,620 still here in the same function 136 136 00:06:47,620 --> 00:06:49,460 or actually in the same block 137 137 00:06:49,460 --> 00:06:51,510 and so in the same scope 138 138 00:06:51,510 --> 00:06:56,510 while here we defined the image in one function, 139 139 00:06:56,520 --> 00:06:59,650 and then we set the style in another function. 140 140 00:06:59,650 --> 00:07:02,883 And so then we needed to use this global variable. 141 141 00:07:03,980 --> 00:07:07,430 So like this, it is a lot better of course. 142 142 00:07:07,430 --> 00:07:10,683 And so now we just need to do the same for image two. 143 143 00:07:13,210 --> 00:07:17,110 So, again we don't need the external variable. 144 144 00:07:17,110 --> 00:07:19,133 We can now simply reassign image. 145 145 00:07:20,060 --> 00:07:23,203 So image 2, then image 2 loaded, 146 146 00:07:24,300 --> 00:07:27,223 and the rest works simply exactly the same. 147 147 00:07:29,200 --> 00:07:31,640 Here let's just change to error 148 148 00:07:31,640 --> 00:07:35,400 and with that, we should already be good to go. 149 149 00:07:35,400 --> 00:07:37,090 So loadNPause, 150 150 00:07:37,090 --> 00:07:39,600 and here let me comment this out 151 151 00:07:39,600 --> 00:07:42,473 so that the same logic doesn't happen twice. 152 152 00:07:44,230 --> 00:07:46,203 And so this is already part one. 153 153 00:07:47,440 --> 00:07:51,018 Let's set on network here to Slow, 154 154 00:07:51,018 --> 00:07:53,683 or actually Fast 3G, 155 155 00:07:58,030 --> 00:08:01,180 And let's actually inspect the images arriving here. 156 156 00:08:01,180 --> 00:08:05,170 So I think that this now part here is really helpful. 157 157 00:08:05,170 --> 00:08:06,863 So seeing everything arrive, 158 158 00:08:09,700 --> 00:08:12,400 it's just a bit difficult. 159 159 00:08:12,400 --> 00:08:14,253 But anyway, let's just try it. 160 160 00:08:15,890 --> 00:08:18,123 And so here you see the image loading. 161 161 00:08:21,730 --> 00:08:24,740 And so then here was the waiting time of two seconds 162 162 00:08:24,740 --> 00:08:27,453 and then the next image loaded and finished. 163 163 00:08:28,520 --> 00:08:32,240 So again, image 1 loaded during all this time, 164 164 00:08:32,240 --> 00:08:35,700 then we had or two second waiting time right here. 165 165 00:08:35,700 --> 00:08:39,190 And then during this time, the second image loaded, 166 166 00:08:39,190 --> 00:08:42,013 and here we can actually get all this detail about that. 167 167 00:08:44,080 --> 00:08:46,530 So this is really interesting stuff 168 168 00:08:46,530 --> 00:08:48,683 if you want to dig deep into this. 169 169 00:08:49,730 --> 00:08:50,563 Alright? 170 170 00:08:50,563 --> 00:08:52,663 But anyway, that's part one. 171 171 00:08:53,500 --> 00:08:56,370 And so now let's go to part two 172 172 00:08:56,370 --> 00:08:59,787 to create this async function called loadAll 173 173 00:09:00,630 --> 00:09:02,750 which receives image array. 174 174 00:09:02,750 --> 00:09:07,500 And then we loop over the array and create an array images. 175 175 00:09:07,500 --> 00:09:09,893 So just keeping these names in mind. 176 176 00:09:13,960 --> 00:09:16,303 So part two will be, 177 177 00:09:18,100 --> 00:09:22,610 loadAll is an async function 178 178 00:09:22,610 --> 00:09:24,483 which takes an imgArr. 179 179 00:09:29,370 --> 00:09:32,683 Then is always this block. 180 180 00:09:33,780 --> 00:09:34,953 So try catch. 181 181 00:09:36,290 --> 00:09:40,690 And now here, we have to create that images array, 182 182 00:09:40,690 --> 00:09:45,690 which is the result of imgArr.map. 183 183 00:09:47,160 --> 00:09:50,920 But now we need to think about the callback function here, 184 184 00:09:50,920 --> 00:09:52,480 right? 185 185 00:09:52,480 --> 00:09:55,990 So in each iteration of the array, we have one image 186 186 00:09:57,110 --> 00:10:00,150 and we want to use the createImage function 187 187 00:10:02,033 --> 00:10:04,650 to load that image. 188 188 00:10:04,650 --> 00:10:08,810 Now this function here returns a promise, 189 189 00:10:08,810 --> 00:10:09,770 right? 190 190 00:10:09,770 --> 00:10:13,090 And so we should await that promise. 191 191 00:10:13,090 --> 00:10:15,573 Otherwise nothing is going to happen. 192 192 00:10:16,620 --> 00:10:20,280 And so here we need to make this function an async function 193 193 00:10:21,320 --> 00:10:24,643 so that then in there we can use, await. 194 194 00:10:25,740 --> 00:10:26,573 Alright? 195 195 00:10:28,500 --> 00:10:32,563 So let's actually pause this one here, just as instructed, 196 196 00:10:35,270 --> 00:10:40,060 and instead we will call loadAll with 197 197 00:10:40,060 --> 00:10:41,513 this test array. 198 198 00:10:44,070 --> 00:10:44,963 Alright. 199 199 00:10:47,050 --> 00:10:48,980 And then the instruction was also 200 200 00:10:48,980 --> 00:10:51,103 to check out these images array. 201 201 00:10:54,320 --> 00:10:55,663 So, images. 202 202 00:10:57,840 --> 00:10:59,498 Now, okay? 203 203 00:10:59,498 --> 00:11:02,183 And so now let's take a look at the console. 204 204 00:11:03,310 --> 00:11:05,823 Let's make it a bit bigger again here. 205 205 00:11:07,210 --> 00:11:12,210 And so what we got here are actually three promises. 206 206 00:11:13,000 --> 00:11:15,210 So we have an array of promises 207 207 00:11:15,210 --> 00:11:18,220 and not the images themselves. 208 208 00:11:18,220 --> 00:11:21,340 And this is actually a big source of confusion 209 209 00:11:21,340 --> 00:11:24,240 for most async/await beginners. 210 210 00:11:24,240 --> 00:11:26,420 And I actually remember really well 211 211 00:11:26,420 --> 00:11:29,040 when I first stumbled upon this problem 212 212 00:11:29,040 --> 00:11:32,630 and didn't really understand why this was happening. 213 213 00:11:32,630 --> 00:11:34,680 However, with all the knowledge 214 214 00:11:34,680 --> 00:11:37,000 that you just learned in the section, 215 215 00:11:37,000 --> 00:11:39,070 if we really think about is 216 216 00:11:39,070 --> 00:11:41,113 then it might actually make sense. 217 217 00:11:42,400 --> 00:11:46,370 So, here we have an async function, right? 218 218 00:11:46,370 --> 00:11:48,710 And this is an arrow function. 219 219 00:11:48,710 --> 00:11:51,290 So we have an implicit return. 220 220 00:11:51,290 --> 00:11:54,250 So this is like returning something 221 221 00:11:54,250 --> 00:11:58,240 from this callback function in each iteration, right? 222 222 00:11:58,240 --> 00:12:00,060 However, as we already know, 223 223 00:12:00,060 --> 00:12:03,580 an async function will always return a promise 224 224 00:12:03,580 --> 00:12:07,990 and not really the value that we're interested in, right? 225 225 00:12:07,990 --> 00:12:10,780 Instead, the value that we want to return 226 226 00:12:10,780 --> 00:12:14,140 is going to be the fulfilled value of the promise 227 227 00:12:14,140 --> 00:12:16,330 that the async function returns. 228 228 00:12:16,330 --> 00:12:17,690 Remember that? 229 229 00:12:17,690 --> 00:12:20,770 And so that is exactly what is happening here, 230 230 00:12:20,770 --> 00:12:23,423 but it is happening simply three times. 231 231 00:12:24,310 --> 00:12:26,680 So we are returning something three times 232 232 00:12:26,680 --> 00:12:28,840 from an async function here, 233 233 00:12:28,840 --> 00:12:33,840 and so therefore the result will be three promises, okay? 234 234 00:12:33,860 --> 00:12:36,220 So just like it happened in that lecture 235 235 00:12:36,220 --> 00:12:39,140 where we attempted to return a string 236 236 00:12:39,140 --> 00:12:42,870 from one of the functions, remember that? 237 237 00:12:42,870 --> 00:12:46,323 So here it is indeed the exact same situation. 238 238 00:12:47,220 --> 00:12:50,973 So again, we end up with this array of promises, 239 239 00:12:51,950 --> 00:12:52,910 okay? 240 240 00:12:52,910 --> 00:12:54,810 But of course behind the scenes, 241 241 00:12:54,810 --> 00:12:57,020 the images are already being loaded, 242 242 00:12:57,020 --> 00:12:59,140 and so we're basically fine. 243 243 00:12:59,140 --> 00:13:01,640 So all we need to do now is to get 244 244 00:13:01,640 --> 00:13:05,293 these image elements themselves out of the promise. 245 245 00:13:06,410 --> 00:13:08,870 So how can we do that? 246 246 00:13:08,870 --> 00:13:11,740 Well, we could take each promise out of the array 247 247 00:13:11,740 --> 00:13:14,140 and then manually await it, 248 248 00:13:14,140 --> 00:13:16,570 but that wouldn't make much sense. 249 249 00:13:16,570 --> 00:13:19,280 First because we would have additional work 250 250 00:13:19,280 --> 00:13:21,910 and second, because then that work 251 251 00:13:21,910 --> 00:13:25,860 would not be happening in parallel, right? 252 252 00:13:25,860 --> 00:13:28,810 But we want it to be happening in parallel 253 253 00:13:28,810 --> 00:13:31,873 and therefore we can use Promise.all. 254 254 00:13:33,300 --> 00:13:36,440 So Promise.all is perfect for this 255 255 00:13:36,440 --> 00:13:39,870 because it already expects an array of images. 256 256 00:13:39,870 --> 00:13:43,910 And so this images array is already perfect 257 257 00:13:43,910 --> 00:13:46,823 to handle by dysfunction, 258 258 00:13:47,740 --> 00:13:48,573 right? 259 259 00:13:49,540 --> 00:13:51,420 And so now we simply need to 260 260 00:13:53,240 --> 00:13:55,090 store the image elements here. 261 261 00:13:55,090 --> 00:13:58,553 So let's call it that into this array. 262 262 00:14:00,300 --> 00:14:02,943 So let's then take a look at that. 263 263 00:14:07,450 --> 00:14:11,560 And so now this is of course going to take some time. 264 264 00:14:11,560 --> 00:14:16,290 So this can only happen once the images are actually loaded. 265 265 00:14:16,290 --> 00:14:18,573 And so now indeed, here we go. 266 266 00:14:20,950 --> 00:14:22,410 Alright? 267 267 00:14:22,410 --> 00:14:26,460 So here are the three image elements and they're now hidden 268 268 00:14:26,460 --> 00:14:29,753 and so that's why we need to add the parallel class later. 269 269 00:14:31,150 --> 00:14:35,290 So, again this worked because here in this loop, 270 270 00:14:35,290 --> 00:14:38,100 of course, the await keyword did its job 271 271 00:14:38,100 --> 00:14:41,640 of pausing the execution of the function, right? 272 272 00:14:41,640 --> 00:14:44,130 And so therefore only after that, 273 273 00:14:44,130 --> 00:14:47,260 we did then Promise.all to actually get 274 274 00:14:47,260 --> 00:14:51,270 the image elements out of the promises array. 275 275 00:14:51,270 --> 00:14:53,600 So this was a bit tricky 276 276 00:14:53,600 --> 00:14:55,690 but maybe you did figure out that 277 277 00:14:55,690 --> 00:14:57,723 this is how you solve this problem. 278 278 00:14:58,560 --> 00:15:01,130 So once you need to use async await 279 279 00:15:01,130 --> 00:15:03,990 in a map method like this, 280 280 00:15:03,990 --> 00:15:06,530 which believe me is pretty common, 281 281 00:15:06,530 --> 00:15:09,210 then you end up with an array of promises 282 282 00:15:09,210 --> 00:15:13,820 that you can then as a next step handle like this. 283 283 00:15:13,820 --> 00:15:17,143 So with the Promise.all combinator function. 284 284 00:15:18,320 --> 00:15:21,630 And so now what the next step is actually pretty easy. 285 285 00:15:21,630 --> 00:15:25,290 All they have to do is to loop over this array 286 286 00:15:25,290 --> 00:15:27,993 and add the parallel class to it. 287 287 00:15:28,990 --> 00:15:31,283 So image element. 288 288 00:15:33,010 --> 00:15:35,630 And so now we don't want a new array. 289 289 00:15:35,630 --> 00:15:39,423 We simply want to do something on each of the elements. 290 290 00:15:40,290 --> 00:15:45,290 And so img.classlist.add parallel 291 291 00:15:47,870 --> 00:15:50,040 like this. 292 292 00:15:50,040 --> 00:15:52,533 Let's get rid of this console.log here, 293 293 00:15:54,210 --> 00:15:55,850 and in our network tab... 294 294 00:15:57,610 --> 00:16:00,073 Oh, this is pretty big. 295 295 00:16:02,210 --> 00:16:05,353 So you see the images are all loading there now. 296 296 00:16:06,730 --> 00:16:07,720 Right? 297 297 00:16:07,720 --> 00:16:09,220 And here we go! 298 298 00:16:09,220 --> 00:16:12,090 So now we have the images nicely displayed 299 299 00:16:12,090 --> 00:16:14,250 and set side-by-side. 300 300 00:16:14,250 --> 00:16:15,210 Let's make it a bit smaller 301 301 00:16:15,210 --> 00:16:16,943 so we can actually see something. 302 302 00:16:18,110 --> 00:16:20,350 Now and indeed, there we go. 303 303 00:16:20,350 --> 00:16:22,700 Let's just see it one more time. 304 304 00:16:22,700 --> 00:16:25,373 Also here the resources actually loading. 305 305 00:16:27,750 --> 00:16:29,993 To see it, we need to make it even smaller. 306 306 00:16:31,250 --> 00:16:32,900 And so you see that down here, 307 307 00:16:32,900 --> 00:16:35,430 the three images basically started loading 308 308 00:16:35,430 --> 00:16:37,070 all at the same time, 309 309 00:16:37,070 --> 00:16:39,710 which is because of this loop here, 310 310 00:16:39,710 --> 00:16:41,430 which we'll of course execute 311 311 00:16:41,430 --> 00:16:44,863 these three callback functions, all one after another. 312 312 00:16:47,260 --> 00:16:50,534 Now, okay? 313 313 00:16:50,534 --> 00:16:51,367 Alright. 314 314 00:16:52,800 --> 00:16:57,210 And with this, we are actually finished with this challenge 315 315 00:16:57,210 --> 00:17:00,140 and also with this whole section. 316 316 00:17:00,140 --> 00:17:02,110 So make sure that you understood 317 317 00:17:02,110 --> 00:17:04,680 what we did here in this part two, 318 318 00:17:04,680 --> 00:17:06,930 because this is pretty important. 319 319 00:17:06,930 --> 00:17:11,560 But besides that, your job is now done for this section. 320 320 00:17:11,560 --> 00:17:14,550 So really happy to still see you here 321 321 00:17:14,550 --> 00:17:16,520 and still learning JavaScript 322 322 00:17:16,520 --> 00:17:19,260 and still making progress. 323 323 00:17:19,260 --> 00:17:23,020 So well done, you can be really proud of yourself. 324 324 00:17:23,020 --> 00:17:24,760 And I really mean that. 325 325 00:17:24,760 --> 00:17:28,433 And now I see you back here next time in the next section. 27461