All language subtitles for 180 Timers_ setTimeout and setInterval.en_US1

To finish the section,

let's quickly talk about timers in JavaScript.

And we have two kinds of timers.

First, the set timeout timer runs just once,

after a defined time, while the set interval timer

keeps running basically forever, until we stop it.

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

at some point in the future.

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

So when we order a pizza,

it doesn't arrive right away, right?

So instead, it's gonna take some time.

And we can simulate that.

So let's write set, timeout.

And then this function receives a callback function.

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

right, and we already talked a lot about this.

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

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

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

Because why not?

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

And then just some pizza emoji here, maybe.

All right?

So this callback function here is the first argument

of the set timeout function.

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

we simply pass in this function as an argument

to set timeout.

And it is this function, who will then call

or callback function in the future.

And when does that future arrive?

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

So here, we pass in the amount of milliseconds,

that will pass until this function is called.

So let's say we want to call this function

after three seconds and so we need to pass 3000.

So one second is 1000 milliseconds.

And so this is basically three times 1000.

Okay, so let's

give it a save.

And you see the page, reload it.

And now after three seconds have passed,

we get this log to the console, okay.

And so with this,

we really delayed calling this function here, right?

Yeah, by exactly three seconds.

And we can also say that we schedule this function call

for three seconds later, all right.

Now, what's really important to realize here

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

All right, so when the execution of our code

reaches this point, it will simply call

the set timeout function,

it will then essentially register

this callback function here to be called later.

And then the code execution simply continues.

And we can prove that by doing something

after the set timeout.

So let's say waiting.

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

this waiting in the console.

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

And then after the three seconds,

then this lock here appeared.

All right, so this is really important to understand.

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

it will simply basically keep counting the time

in the background, and register this callback function

to be called after that time has elapsed,

and then immediately, JavaScript will move on

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

And this mechanism is called Asynchronous JavaScript.

And we will talk about how exactly all of this works

behind the scenes in a special section

just about Asynchronous JavaScript.

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

some arguments into this function here?

It's not that simple, right?

Because we are not calling this function ourselves.

So we are not using the parenthesis like this

and so therefore, we cannot pass in any arguments

into the function.

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

actually has a solution for that.

And it works like this

so basically, all the arguments here that we pass

after the delay will be arguments to the function.

So let me demonstrate that to you.

So let's say here, olives

and then another argument spinach.

And so here, I can now specify the ingredients.

So olives and spinach will be ingredients in our pizza.

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

And here we can then use them somehow.

Let's make this a template literal.

(typing)

Let's give it a save here

and so the waiting once again appeared immediately.

And then after three seconds

or string, appear to log to the console.

And indeed, this third argument that we passed in,

did not become the first argument,

or the first parameter of our function here.

And then the fourth argument became this second one.

And if we passed an even more,

we could then get access to them

here in this callback function.

All right that is essentially how the set timeout function

here works, there's just one more detail

that I want to show you,

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

at least until the delay has actually passed.

So before these three seconds here have passed,

we can cancel the timeout.

And so let me show you how.

Now to build this example,

I first want to change something here.

So I want to put the ingredients into an array.

(typing)

So let's say again, olives,

and spinach and so how would we then pass in

these ingredients here?

We're not gonna do ingredients,

zero and ingredients one, like this, right?

Now, instead, we will spread the array here

using the spread operator

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

and put them here, basically comma separated.

And so this now works exactly the same.

But now what I want to do here is to say

that if the ingredients include spinach,

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

So if the ingredients include spinach,

then, clear timeout.

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

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

So let's say simply,

let's say pizza,

timer.

And so here, we can then use that variable.

So that timer to clear it, all right.

So again, here, we basically stored the result

of the set timeout function,

which is essentially the timer.

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

And then we can use that variable

to basically delete the timer.

And for that, we use clear timeout.

And so now since this array contains this spinach here,

now you will not see the pizza string here

printed to the console, all right.

But if it did not include spinach,

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

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

And that's actually it,

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

It's pretty straightforward, right?

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

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

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

then we get the value immediately right now.

But typically, a bank takes some time,

like some days or some weeks to approve that loan.

And so let's simulate that here

by taking like two or three seconds.

So what happens when we successfully request a loan

is essentially this code here, right.

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

So curly braces,

then function just like this,

and then put all of this into a set timeout.

And then

down here, give it a safe

and then it would be nicely formatted.

Now, okay, and now let's say

well after two and a half seconds,

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

So requesting a loan of 1000.

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

And indeed, the bank just approved my loan here.

So that was 10,000.

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

And now my loan was approved,

and so then it appeared here in the movements.

And it also appeared here in the balance,

you saw that?

So that makes our application a little bit more realistic.

But let's go back now,

because we also need to talk about set interval.

So we learned that set timeout here,

simply schedules a function to run after

a certain amount of time,

but the callback function is only executed once.

Now, what if we wanted to run a function

over and over again, like every five seconds,

or every 10 minutes?

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

So this one is gonna be set timeout.

So let's use the set timeout function

to basically create a clock

that will display in our console.

So set timeout, and then a function,

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

but it doesn't really matter here.

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

So let's say now,

and then new date.

Okay, so this is nothing new at this point.

And then let's just log that date

so that current date to the console.

And we want to execute this every one second.

And so here we say one second.

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

this should be executed,

but it doesn't

and that's because I made the mistake

of calling set timeout again.

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

this one is actually called set interval.

So maybe you were already spotting this mistake.

But now let's see what happens.

So now after each second here,

we get the current time displayed to the console.

So what's happening here is that this callback function

is now executing every second.

Okay, so every second,

a new date is created here,

and is then logged to the console.

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

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

every three seconds.

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

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

Now, of course, you could print a real clock

using this function now,

like you could get the current hour, minutes and seconds

from this now, date.

And so I would challenge you to do that actually,

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

That is only logging the hours, minutes and seconds here

to the console.

Now I'm not gonna do that here.

But I think this would be a nice challenge

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

previously in the section.

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

So take this challenge that I just mentioned,

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