Original subtitles

1 1

To finish the section, 2

2

let's quickly talk about timers in JavaScript. 3

3

And we have two kinds of timers. 4

4

First, the set timeout timer runs just once, 5

5

after a defined time, while the set interval timer 6

6

keeps running basically forever, until we stop it. 7

7

So basically, we can use set timeout to execute some code 8

8

at some point in the future. 9

9

So let's use this to simulate ordering a pizza. 10

10

So when we order a pizza, 11

11

it doesn't arrive right away, right? 12

12

So instead, it's gonna take some time. 13

13

And we can simulate that. 14

14

So let's write set, timeout. 15

15

And then this function receives a callback function. 16

16

So just like some array methods, or dumb event handlers, 17

17

right, and we already talked a lot about this. 18

18

And I think we even used the set timeout function here, 19

19

as an example of callback functions a bit earlier, right? 20

20

So let's use an arrow function this time, actually. 21

21

Because why not? 22

22

And so here, let's just say, here is your pizza. 23

23

And then just some pizza emoji here, maybe. 24

24

All right? 25

25

So this callback function here is the first argument 26

26

of the set timeout function. 27

27

And so again, we do not call this function ourselves, 28

28

we simply pass in this function as an argument 29

29

to set timeout. 30

30

And it is this function, who will then call 31

31

or callback function in the future. 32

32

And when does that future arrive? 33

33

Well, that's what we specify here in the second argument. 34

34

So here, we pass in the amount of milliseconds, 35

35

that will pass until this function is called. 36

36

So let's say we want to call this function 37

37

after three seconds and so we need to pass 3000. 38

38

So one second is 1000 milliseconds. 39

39

And so this is basically three times 1000. 40

40

Okay, so let's 41

41

give it a save. 42

42

And you see the page, reload it. 43

43

And now after three seconds have passed, 44

44

we get this log to the console, okay. 45

45

And so with this, 46

46

we really delayed calling this function here, right? 47

47

Yeah, by exactly three seconds. 48

48

And we can also say that we schedule this function call 49

49

for three seconds later, all right. 50

50

Now, what's really important to realize here 51

51

is that the code execution does not stop here at this point. 52

52

All right, so when the execution of our code 53

53

reaches this point, it will simply call 54

54

the set timeout function, 55

55

it will then essentially register 56

56

this callback function here to be called later. 57

57

And then the code execution simply continues. 58

58

And we can prove that by doing something 59

59

after the set timeout. 60

60

So let's say waiting. 61

61

And if we now save this, then immediately we will see 62

62

this waiting in the console. 63

63

So let's check that and indeed, we get waiting. 64

64

And then after the three seconds, 65

65

then this lock here appeared. 66

66

All right, so this is really important to understand. 67

67

So again, as soon as JavaScript hits this line of code here, 68

68

it will simply basically keep counting the time 69

69

in the background, and register this callback function 70

70

to be called after that time has elapsed, 71

71

and then immediately, JavaScript will move on 72

72

to the next line, which is this one, all right. 73

73

And this mechanism is called Asynchronous JavaScript. 74

74

And we will talk about how exactly all of this works 75

75

behind the scenes in a special section 76

76

just about Asynchronous JavaScript. 77

77

Okay, but anyway, what if we now needed to pass 78

78

some arguments into this function here? 79

79

It's not that simple, right? 80

80

Because we are not calling this function ourselves. 81

81

So we are not using the parenthesis like this 82

82

and so therefore, we cannot pass in any arguments 83

83

into the function. 84

84

All right, now, however, the D set timeout function here 85

85

actually has a solution for that. 86

86

And it works like this 87

87

so basically, all the arguments here that we pass 88

88

after the delay will be arguments to the function. 89

89

So let me demonstrate that to you. 90

90

So let's say here, olives 91

91

and then another argument spinach. 92

92

And so here, I can now specify the ingredients. 93

93

So olives and spinach will be ingredients in our pizza. 94

94

So let's say ingredient one, and ingredient two. 95

95

And here we can then use them somehow. 96

96

Let's make this a template literal. 97

97

(typing) 98

98

Let's give it a save here 99

99

and so the waiting once again appeared immediately. 100

100

And then after three seconds 101

101

or string, appear to log to the console. 102

102

And indeed, this third argument that we passed in, 103

103

did not become the first argument, 104

104

or the first parameter of our function here. 105

105

And then the fourth argument became this second one. 106

106

And if we passed an even more, 107

107

we could then get access to them 108

108

here in this callback function. 109

109

All right that is essentially how the set timeout function 110

110

here works, there's just one more detail 111

111

that I want to show you, 112

112

which is the fact that we can actually cancel the timer, 113

113

at least until the delay has actually passed. 114

114

So before these three seconds here have passed, 115

115

we can cancel the timeout. 116

116

And so let me show you how. 117

117

Now to build this example, 118

118

I first want to change something here. 119

119

So I want to put the ingredients into an array. 120

120

(typing) 121

121

So let's say again, olives, 122

122

and spinach and so how would we then pass in 123

123

these ingredients here? 124

124

We're not gonna do ingredients, 125

125

zero and ingredients one, like this, right? 126

126

Now, instead, we will spread the array here 127

127

using the spread operator 128

128

and so this will then take the elements out of the array 129

129

and put them here, basically comma separated. 130

130

And so this now works exactly the same. 131

131

But now what I want to do here is to say 132

132

that if the ingredients include spinach, 133

133

because that's something that many people don't like. 134

134

So if the ingredients include spinach, 135

135

then, clear timeout. 136

136

And so now here, we need to pass in the name of the timer. 137

137

And so we can basically assign this timer to a variable. 138

138

So let's say simply, 139

139

let's say pizza, 140

140

timer. 141

141

And so here, we can then use that variable. 142

142

So that timer to clear it, all right. 143

143

So again, here, we basically stored the result 144

144

of the set timeout function, 145

145

which is essentially the timer. 146

146

And then we can use that variable to clear the timeout. 147

147

And then we can use that variable 148

148

to basically delete the timer. 149

149

And for that, we use clear timeout. 150

150

And so now since this array contains this spinach here, 151

151

now you will not see the pizza string here 152

152

printed to the console, all right. 153

153

But if it did not include spinach, 154

154

then of course, it would still work after three seconds. 155

155

All right, so this is how the set timeout function works. 156

156

And that's actually it, 157

157

that's all you need to know about the set timeout function. 158

158

It's pretty straightforward, right? 159

159

So let's now actually go back to our application, 160

160

and implement the timer to simulate the approval of a loan. 161

161

Okay, so when we click this button here to request a loan, 162

162

then we get the value immediately right now. 163

163

But typically, a bank takes some time, 164

164

like some days or some weeks to approve that loan. 165

165

And so let's simulate that here 166

166

by taking like two or three seconds. 167

167

So what happens when we successfully request a loan 168

168

is essentially this code here, right. 169

169

And so let's simply wrap all this code into a function. 170

170

So curly braces, 171

171

then function just like this, 172

172

and then put all of this into a set timeout. 173

173

And then 174

174

down here, give it a safe 175

175

and then it would be nicely formatted. 176

176

Now, okay, and now let's say 177

177

well after two and a half seconds, 178

178

okay, and so let's just see what it looks like in practice. 179

179

So requesting a loan of 1000. 180

180

And so now it's gonna take two and a half seconds. 181

181

And indeed, the bank just approved my loan here. 182

182

So that was 10,000. 183

183

Let's do something else, so count the seconds here. 184

184

And now my loan was approved, 185

185

and so then it appeared here in the movements. 186

186

And it also appeared here in the balance, 187

187

you saw that? 188

188

So that makes our application a little bit more realistic. 189

189

But let's go back now, 190

190

because we also need to talk about set interval. 191

191

So we learned that set timeout here, 192

192

simply schedules a function to run after 193

193

a certain amount of time, 194

194

but the callback function is only executed once. 195

195

Now, what if we wanted to run a function 196

196

over and over again, like every five seconds, 197

197

or every 10 minutes? 198

198

Well, for that, we have the set timeout function. 199

199

So this one is gonna be set timeout. 200

200

So let's use the set timeout function 201

201

to basically create a clock 202

202

that will display in our console. 203

203

So set timeout, and then a function, 204

204

and of course, I could have used an arrow function, 205

205

but it doesn't really matter here. 206

206

So our callback function, and let's create a new date here. 207

207

So let's say now, 208

208

and then new date. 209

209

Okay, so this is nothing new at this point. 210

210

And then let's just log that date 211

211

so that current date to the console. 212

212

And we want to execute this every one second. 213

213

And so here we say one second. 214

214

So let's see what happens and indeed, once every second now, 215

215

this should be executed, 216

216

but it doesn't 217

217

and that's because I made the mistake 218

218

of calling set timeout again. 219

219

But of course, as I was saying all the time, 220

220

this one is actually called set interval. 221

221

So maybe you were already spotting this mistake. 222

222

But now let's see what happens. 223

223

So now after each second here, 224

224

we get the current time displayed to the console. 225

225

So what's happening here is that this callback function 226

226

is now executing every second. 227

227

Okay, so every second, 228

228

a new date is created here, 229

229

and is then logged to the console. 230

230

And of course, we could also say, every three seconds, 231

231

and then we would get the current time on the console, 232

232

every three seconds. 233

233

You see, so it's adding three seconds each time now. 234

234

But one second here makes it a little bit more sense. 235

235

Now, of course, you could print a real clock 236

236

using this function now, 237

237

like you could get the current hour, minutes and seconds 238

238

from this now, date. 239

239

And so I would challenge you to do that actually, 240

240

to take a minute or two in order to build like a real clock. 241

241

That is only logging the hours, minutes and seconds here 242

242

to the console. 243

243

Now I'm not gonna do that here. 244

244

But I think this would be a nice challenge 245

245

to train a little bit the stuff that we've been using 246

246

previously in the section. 247

247

But for now, this is actually enough for this video. 248

248

So take this challenge that I just mentioned, 249

249

and then I'll see you soon in the next video.