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.