Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
1
00:00:01,400 --> 00:00:04,118
Let me now quickly, show you some of the stuff,
2
2
00:00:04,118 --> 00:00:06,853
that we just learned and practice.
3
3
00:00:08,300 --> 00:00:12,860
And so let's not build an extremely simple example.
4
4
00:00:12,860 --> 00:00:17,860
So I will start by simply logging test, start
5
5
00:00:18,140 --> 00:00:19,920
to the console.
6
6
00:00:19,920 --> 00:00:24,433
Then, afterwards I will create a set time out,
7
7
00:00:25,640 --> 00:00:29,650
with something that will just also lock something
8
8
00:00:29,650 --> 00:00:31,500
to the console only.
9
9
00:00:31,500 --> 00:00:33,943
So zero second timer.
10
10
00:00:34,930 --> 00:00:37,920
And so that's because we will fire this timer
11
11
00:00:37,920 --> 00:00:40,600
after exactly zero seconds.
12
12
00:00:40,600 --> 00:00:41,433
Okay.
13
13
00:00:41,433 --> 00:00:44,010
So basically this is a timer,
14
14
00:00:44,010 --> 00:00:46,830
which should call this timer function exactly
15
15
00:00:46,830 --> 00:00:48,890
after zero seconds.
16
16
00:00:48,890 --> 00:00:51,710
So what that means is that after zero seconds,
17
17
00:00:51,710 --> 00:00:56,433
this callback will be put on the callback queue, right?
18
18
00:00:57,350 --> 00:01:00,130
Then next up, let's build a promise
19
19
00:01:00,130 --> 00:01:01,743
that resolves immediately.
20
20
00:01:03,150 --> 00:01:05,070
So this is something that we will learn
21
21
00:01:05,070 --> 00:01:07,150
in the next video actually.
22
22
00:01:07,150 --> 00:01:10,223
And so for now, just follow what I'm writing here.
23
23
00:01:11,350 --> 00:01:14,210
So promise that resolve, basically allows us
24
24
00:01:14,210 --> 00:01:17,520
to build a promise, so to create a promise
25
25
00:01:17,520 --> 00:01:20,040
that is immediately resolved.
26
26
00:01:20,040 --> 00:01:23,690
So one that immediately has a success value.
27
27
00:01:23,690 --> 00:01:27,160
And so that fulfilled, success value, is gonna be this one
28
28
00:01:27,160 --> 00:01:28,740
we passed in here.
29
29
00:01:28,740 --> 00:01:32,760
So resolved, promise, one,
30
30
00:01:32,760 --> 00:01:35,893
and then we can handle that resolved promise.
31
31
00:01:36,910 --> 00:01:41,520
And so that, our response we can then simply log it
32
32
00:01:41,520 --> 00:01:42,353
to the console.
33
33
00:01:43,800 --> 00:01:46,224
So, just like in any other promise,
34
34
00:01:46,224 --> 00:01:48,730
we can handle it with a den method.
35
35
00:01:48,730 --> 00:01:51,510
And this callback function here, will get called with the
36
36
00:01:51,510 --> 00:01:54,340
resolved value, as an argument.
37
37
00:01:54,340 --> 00:01:55,930
And so in this case,
38
38
00:01:55,930 --> 00:01:59,680
the result value of that promise, is this one here that we
39
39
00:01:59,680 --> 00:02:00,773
just specified.
40
40
00:02:02,210 --> 00:02:07,210
And now just to finish, let's just log another string test.
41
41
00:02:07,650 --> 00:02:11,500
And, and so for now, that's actually it.
42
42
00:02:11,500 --> 00:02:15,370
So in what order do you think that these four messages,
43
43
00:02:15,370 --> 00:02:18,960
that we have here, will be logged to the console?
44
44
00:02:18,960 --> 00:02:22,610
And I want you to really think about this and maybe even
45
45
00:02:22,610 --> 00:02:24,933
pause the video, and write it down.
46
46
00:02:26,996 --> 00:02:29,730
Well, let's think about this together
47
47
00:02:29,730 --> 00:02:32,840
before we actually check out the result.
48
48
00:02:32,840 --> 00:02:35,970
So the first two messages that are gonna be printed
49
49
00:02:35,970 --> 00:02:37,840
should be pretty obvious,
50
50
00:02:37,840 --> 00:02:41,860
that's because we already know that any top level of coat.
51
51
00:02:41,860 --> 00:02:46,200
So coat outside of any callback, will run first.
52
52
00:02:46,200 --> 00:02:48,910
And so of course, the first two logs will come
53
53
00:02:48,910 --> 00:02:52,093
from these two synchronous, console dot log Sierra.
54
54
00:02:53,040 --> 00:02:56,800
But now between the timer, and the resolved promise here,
55
55
00:02:56,800 --> 00:02:59,300
it might be a little bit trickier.
56
56
00:02:59,300 --> 00:03:01,550
So both the timer and a promise,
57
57
00:03:01,550 --> 00:03:04,330
will finish at the exact same time.
58
58
00:03:04,330 --> 00:03:07,270
So both right after zero seconds.
59
59
00:03:07,270 --> 00:03:08,210
So the timer,
60
60
00:03:08,210 --> 00:03:12,760
because we told it to finish after zero seconds
61
61
00:03:12,760 --> 00:03:15,890
and a promise because we told it to immediately
62
62
00:03:15,890 --> 00:03:17,093
become resolved.
63
63
00:03:18,290 --> 00:03:19,123
Right?
64
64
00:03:19,123 --> 00:03:20,060
And so therefore,
65
65
00:03:20,060 --> 00:03:23,240
they will both finish at the exact same time.
66
66
00:03:23,240 --> 00:03:26,420
So which one do you think will be handled first
67
67
00:03:26,420 --> 00:03:27,460
or in other words,
68
68
00:03:27,460 --> 00:03:31,053
which of these two callbacks here will be executed first?
69
69
00:03:31,930 --> 00:03:35,300
Well, the timer appears first in the coat
70
70
00:03:35,300 --> 00:03:37,860
and so it kind of finished first.
71
71
00:03:37,860 --> 00:03:39,070
And so it's callback,
72
72
00:03:39,070 --> 00:03:42,908
will be put on the callback queue first, but does that mean
73
73
00:03:42,908 --> 00:03:46,154
that this call back here will be executed first?
74
74
00:03:46,154 --> 00:03:49,930
Well, actually, no, it doesn't.
75
75
00:03:49,930 --> 00:03:54,136
And that's because of the micro-tasks queue, remember?
76
76
00:03:54,136 --> 00:03:57,590
So the callback of the resolved promise here,
77
77
00:03:57,590 --> 00:04:02,190
so this one will be put on the micro-tasks queue and this
78
78
00:04:02,190 --> 00:04:05,630
micro-tasks queue, as you learned in the last video
79
79
00:04:05,630 --> 00:04:08,690
has priority over the callback queue.
80
80
00:04:08,690 --> 00:04:11,060
And so after this whole code runs,
81
81
00:04:11,060 --> 00:04:13,590
we will have one callback in a callback queue
82
82
00:04:13,590 --> 00:04:16,116
and one in a micro-tasks queue.
83
83
00:04:16,116 --> 00:04:19,750
And therefore the one from the micro tests queue
84
84
00:04:19,750 --> 00:04:21,600
should be executed first.
85
85
00:04:21,600 --> 00:04:25,720
And so therefore the callback from the micro-tasks queue
86
86
00:04:25,720 --> 00:04:28,210
should be executed first.
87
87
00:04:28,210 --> 00:04:31,640
And so that's this one here and there for the first message
88
88
00:04:31,640 --> 00:04:35,959
to appear of these two, should be resolved Promise one.
89
89
00:04:35,959 --> 00:04:37,490
All right.
90
90
00:04:37,490 --> 00:04:39,229
So the order in which they should appear
91
91
00:04:39,229 --> 00:04:44,229
is this tenders, tenders and finally the timer.
92
92
00:04:44,720 --> 00:04:49,690
And so that's now finally confirmed as, so I'm saving it
93
93
00:04:49,690 --> 00:04:53,869
and indeed did as exactly as expected.
94
94
00:04:53,869 --> 00:04:56,760
And so that's a relief actually.
95
95
00:04:56,760 --> 00:05:00,480
So what I told you in the last lecture is actually true.
96
96
00:05:00,480 --> 00:05:02,593
Now we proved it with coat.
97
97
00:05:03,440 --> 00:05:05,650
Now, remember that the implication
98
98
00:05:05,650 --> 00:05:08,630
of the fact that micro-tasks have priority
99
99
00:05:08,630 --> 00:05:11,590
over regular callbacks, is that if one of
100
100
00:05:11,590 --> 00:05:14,497
the micro-tasks takes a long time to run,
101
101
00:05:14,497 --> 00:05:18,797
then the timer will actually be delayed and not run after
102
102
00:05:18,797 --> 00:05:23,310
the zero seconds that we specified here, right?
103
103
00:05:23,310 --> 00:05:26,770
So instead it will run a little bit later just after
104
104
00:05:26,770 --> 00:05:30,420
the micro-task is actually done with its work.
105
105
00:05:30,420 --> 00:05:32,230
And so to finish this lecture,
106
106
00:05:32,230 --> 00:05:35,173
let's actually simulate what I just said.
107
107
00:05:36,530 --> 00:05:39,080
So here I will create another promise,
108
108
00:05:39,080 --> 00:05:41,373
that will immediately resolve.
109
109
00:05:46,230 --> 00:05:51,027
So let's just say resolved promise two, and then again,
110
110
00:05:51,910 --> 00:05:53,303
we can handle it here.
111
111
00:05:58,110 --> 00:06:00,673
And then as always, we want to log,
112
112
00:06:01,702 --> 00:06:04,140
the result to the console.
113
113
00:06:04,140 --> 00:06:05,640
But before we doing that,
114
114
00:06:05,640 --> 00:06:08,010
we actually want this callback function
115
115
00:06:08,010 --> 00:06:09,877
to have a really heavy task,
116
116
00:06:09,877 --> 00:06:12,770
which should take a lot of time.
117
117
00:06:12,770 --> 00:06:16,250
And so let's simulate that this callback takes a long time
118
118
00:06:16,250 --> 00:06:19,521
to run, by looping over a large number.
119
119
00:06:19,521 --> 00:06:23,120
So we can do the simulation simply,
120
120
00:06:23,120 --> 00:06:25,510
with an old school four loop.
121
121
00:06:25,510 --> 00:06:30,510
So let's start with I at zero and now I will loop
122
122
00:06:30,520 --> 00:06:34,819
all the way until one like very large number.
123
123
00:06:34,819 --> 00:06:39,163
Let's say this, and I will have to experiment a little bit.
124
124
00:06:40,220 --> 00:06:43,240
And for your computer, it might indeed be different.
125
125
00:06:43,240 --> 00:06:45,020
So if your computer is slower,
126
126
00:06:45,020 --> 00:06:46,873
maybe then you want a smaller number
127
127
00:06:46,873 --> 00:06:48,910
and maybe it's faster than mine.
128
128
00:06:48,910 --> 00:06:53,170
And then maybe a smaller number will be enough, right?
129
129
00:06:53,170 --> 00:06:55,260
I'm not sure if I said it correctly.
130
130
00:06:55,260 --> 00:06:57,415
So if your computer is slower than mine,
131
131
00:06:57,415 --> 00:07:01,453
then you will need a larger number, right?
132
132
00:07:02,480 --> 00:07:05,600
And so again, this line of code here will simulate
133
133
00:07:05,600 --> 00:07:08,570
that the callback function takes a long time.
134
134
00:07:08,570 --> 00:07:12,300
So really just this micro-task takes a long time.
135
135
00:07:12,300 --> 00:07:16,490
All right, it is not the asynchronous task itself.
136
136
00:07:16,490 --> 00:07:19,792
So the promise itself will still be resolved immediately,
137
137
00:07:19,792 --> 00:07:22,670
but then the micro-task that it contains,
138
138
00:07:22,670 --> 00:07:26,130
so that it puts on the micro-tasks queue.
139
139
00:07:26,130 --> 00:07:28,650
That's the one that will take a long time.
140
140
00:07:28,650 --> 00:07:29,970
And so by doing that,
141
141
00:07:29,970 --> 00:07:33,330
I can show you that the callbacks in the callback queue,
142
142
00:07:33,330 --> 00:07:36,680
just like this one here, will indeed be delayed
143
143
00:07:36,680 --> 00:07:39,178
and not run after zero seconds.
144
144
00:07:39,178 --> 00:07:41,253
So let's try this now,
145
145
00:07:42,400 --> 00:07:45,150
and you see it took a long time here
146
146
00:07:45,150 --> 00:07:48,620
until this lock appeared, right?
147
147
00:07:48,620 --> 00:07:51,630
So maybe we can have even a bigger number.
148
148
00:07:51,630 --> 00:07:54,660
And I hope that my computer is not going to explode,
149
149
00:07:54,660 --> 00:07:55,653
with this one.
150
150
00:07:56,511 --> 00:07:59,810
So you see that the page is kind of loading here
151
151
00:07:59,810 --> 00:08:01,933
and it's taking a lot of time.
152
152
00:08:02,790 --> 00:08:06,420
And so, actually now eventually it finished,
153
153
00:08:06,420 --> 00:08:10,460
but you see, that now only after all this work,
154
154
00:08:10,460 --> 00:08:14,450
the zero second timer message appeared on the screen.
155
155
00:08:14,450 --> 00:08:18,250
And so this is actual proof that these zero seconds
156
156
00:08:18,250 --> 00:08:21,080
that we have here are not a guarantee.
157
157
00:08:21,080 --> 00:08:22,420
Okay.
158
158
00:08:22,420 --> 00:08:25,400
And that is exactly what I wanted to show you.
159
159
00:08:25,400 --> 00:08:29,120
So this means, that you cannot really do high precision
160
160
00:08:29,120 --> 00:08:31,930
things using JavaScript timers.
161
161
00:08:31,930 --> 00:08:33,200
So just keep that in mind,
162
162
00:08:33,200 --> 00:08:36,042
whenever you are working with promises.
163
163
00:08:36,042 --> 00:08:37,823
So basically with micro-tasks,
164
164
00:08:37,823 --> 00:08:40,543
and with timers at the same time.
165
165
00:08:41,840 --> 00:08:42,990
Okay.
166
166
00:08:42,990 --> 00:08:45,110
Let's just remove the zero here,
167
167
00:08:45,110 --> 00:08:48,300
so that you don't explode your computer,
168
168
00:08:48,300 --> 00:08:51,623
but you still see that the effect is the same.
169
169
00:08:53,220 --> 00:08:56,150
All right, and that's actually enough for this video.
170
170
00:08:56,150 --> 00:08:59,189
I think I proved my point and demonstrated to the things
171
171
00:08:59,189 --> 00:09:02,420
that we just learned in the previous lecture.
172
172
00:09:02,420 --> 00:09:05,580
And so now we're ready to go back to some more practical
173
173
00:09:05,580 --> 00:09:08,881
aspects of asynchronous JavaScript, and that will be
174
174
00:09:08,881 --> 00:09:13,023
to create promises from scratch in the next video.
15174
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.