Original subtitles

1 1

Let me now quickly, show you some of the stuff, 2

2

that we just learned and practice. 3

3

And so let's not build an extremely simple example. 4

4

So I will start by simply logging test, start 5

5

to the console. 6

6

Then, afterwards I will create a set time out, 7

7

with something that will just also lock something 8

8

to the console only. 9

9

So zero second timer. 10

10

And so that's because we will fire this timer 11

11

after exactly zero seconds. 12

12

Okay. 13

13

So basically this is a timer, 14

14

which should call this timer function exactly 15

15

after zero seconds. 16

16

So what that means is that after zero seconds, 17

17

this callback will be put on the callback queue, right? 18

18

Then next up, let's build a promise 19

19

that resolves immediately. 20

20

So this is something that we will learn 21

21

in the next video actually. 22

22

And so for now, just follow what I'm writing here. 23

23

So promise that resolve, basically allows us 24

24

to build a promise, so to create a promise 25

25

that is immediately resolved. 26

26

So one that immediately has a success value. 27

27

And so that fulfilled, success value, is gonna be this one 28

28

we passed in here. 29

29

So resolved, promise, one, 30

30

and then we can handle that resolved promise. 31

31

And so that, our response we can then simply log it 32

32

to the console. 33

33

So, just like in any other promise, 34

34

we can handle it with a den method. 35

35

And this callback function here, will get called with the 36

36

resolved value, as an argument. 37

37

And so in this case, 38

38

the result value of that promise, is this one here that we 39

39

just specified. 40

40

And now just to finish, let's just log another string test. 41

41

And, and so for now, that's actually it. 42

42

So in what order do you think that these four messages, 43

43

that we have here, will be logged to the console? 44

44

And I want you to really think about this and maybe even 45

45

pause the video, and write it down. 46

46

Well, let's think about this together 47

47

before we actually check out the result. 48

48

So the first two messages that are gonna be printed 49

49

should be pretty obvious, 50

50

that's because we already know that any top level of coat. 51

51

So coat outside of any callback, will run first. 52

52

And so of course, the first two logs will come 53

53

from these two synchronous, console dot log Sierra. 54

54

But now between the timer, and the resolved promise here, 55

55

it might be a little bit trickier. 56

56

So both the timer and a promise, 57

57

will finish at the exact same time. 58

58

So both right after zero seconds. 59

59

So the timer, 60

60

because we told it to finish after zero seconds 61

61

and a promise because we told it to immediately 62

62

become resolved. 63

63

Right? 64

64

And so therefore, 65

65

they will both finish at the exact same time. 66

66

So which one do you think will be handled first 67

67

or in other words, 68

68

which of these two callbacks here will be executed first? 69

69

Well, the timer appears first in the coat 70

70

and so it kind of finished first. 71

71

And so it's callback, 72

72

will be put on the callback queue first, but does that mean 73

73

that this call back here will be executed first? 74

74

Well, actually, no, it doesn't. 75

75

And that's because of the micro-tasks queue, remember? 76

76

So the callback of the resolved promise here, 77

77

so this one will be put on the micro-tasks queue and this 78

78

micro-tasks queue, as you learned in the last video 79

79

has priority over the callback queue. 80

80

And so after this whole code runs, 81

81

we will have one callback in a callback queue 82

82

and one in a micro-tasks queue. 83

83

And therefore the one from the micro tests queue 84

84

should be executed first. 85

85

And so therefore the callback from the micro-tasks queue 86

86

should be executed first. 87

87

And so that's this one here and there for the first message 88

88

to appear of these two, should be resolved Promise one. 89

89

All right. 90

90

So the order in which they should appear 91

91

is this tenders, tenders and finally the timer. 92

92

And so that's now finally confirmed as, so I'm saving it 93

93

and indeed did as exactly as expected. 94

94

And so that's a relief actually. 95

95

So what I told you in the last lecture is actually true. 96

96

Now we proved it with coat. 97

97

Now, remember that the implication 98

98

of the fact that micro-tasks have priority 99

99

over regular callbacks, is that if one of 100

100

the micro-tasks takes a long time to run, 101

101

then the timer will actually be delayed and not run after 102

102

the zero seconds that we specified here, right? 103

103

So instead it will run a little bit later just after 104

104

the micro-task is actually done with its work. 105

105

And so to finish this lecture, 106

106

let's actually simulate what I just said. 107

107

So here I will create another promise, 108

108

that will immediately resolve. 109

109

So let's just say resolved promise two, and then again, 110

110

we can handle it here. 111

111

And then as always, we want to log, 112

112

the result to the console. 113

113

But before we doing that, 114

114

we actually want this callback function 115

115

to have a really heavy task, 116

116

which should take a lot of time. 117

117

And so let's simulate that this callback takes a long time 118

118

to run, by looping over a large number. 119

119

So we can do the simulation simply, 120

120

with an old school four loop. 121

121

So let's start with I at zero and now I will loop 122

122

all the way until one like very large number. 123

123

Let's say this, and I will have to experiment a little bit. 124

124

And for your computer, it might indeed be different. 125

125

So if your computer is slower, 126

126

maybe then you want a smaller number 127

127

and maybe it's faster than mine. 128

128

And then maybe a smaller number will be enough, right? 129

129

I'm not sure if I said it correctly. 130

130

So if your computer is slower than mine, 131

131

then you will need a larger number, right? 132

132

And so again, this line of code here will simulate 133

133

that the callback function takes a long time. 134

134

So really just this micro-task takes a long time. 135

135

All right, it is not the asynchronous task itself. 136

136

So the promise itself will still be resolved immediately, 137

137

but then the micro-task that it contains, 138

138

so that it puts on the micro-tasks queue. 139

139

That's the one that will take a long time. 140

140

And so by doing that, 141

141

I can show you that the callbacks in the callback queue, 142

142

just like this one here, will indeed be delayed 143

143

and not run after zero seconds. 144

144

So let's try this now, 145

145

and you see it took a long time here 146

146

until this lock appeared, right? 147

147

So maybe we can have even a bigger number. 148

148

And I hope that my computer is not going to explode, 149

149

with this one. 150

150

So you see that the page is kind of loading here 151

151

and it's taking a lot of time. 152

152

And so, actually now eventually it finished, 153

153

but you see, that now only after all this work, 154

154

the zero second timer message appeared on the screen. 155

155

And so this is actual proof that these zero seconds 156

156

that we have here are not a guarantee. 157

157

Okay. 158

158

And that is exactly what I wanted to show you. 159

159

So this means, that you cannot really do high precision 160

160

things using JavaScript timers. 161

161

So just keep that in mind, 162

162

whenever you are working with promises. 163

163

So basically with micro-tasks, 164

164

and with timers at the same time. 165

165

Okay. 166

166

Let's just remove the zero here, 167

167

so that you don't explode your computer, 168

168

but you still see that the effect is the same. 169

169

All right, and that's actually enough for this video. 170

170

I think I proved my point and demonstrated to the things 171

171

that we just learned in the previous lecture. 172

172

And so now we're ready to go back to some more practical 173

173

aspects of asynchronous JavaScript, and that will be 174

174

to create promises from scratch in the next video.