Hello and welcome to another video.
In this lesson, we are going to talk about time methods.
The window object has two methods that allow us to delay the execution of a block of code or executed
repetitively between an interval of time.
So let's start with the set time out method, which is going to delay the execution of a block of code.
So this method is part of the window object and it accepts to argument.
So the first argument is the callback function.
This is something that we are going to learn later in the course, but for now, let's just think of
this as a function that's going to be executed when this method is finished.
And when is this method going to be finished?
When.
This time has passed, so the second argument is going to be eight time in milliseconds.
So if we want to wait one second, we can just put a thousand here.
So a thousand milliseconds.
So after one second, what's going to happen is that our callback function is going to be executed.
So I know these names, they may sound a bit complicated, but this is actually really simple.
So let's go to Visual Studio Code to do our first example.
So let's just send one message to the council and then let's send the second message three seconds later.
So here I have the first message and then for the second message, I'm just going to delete three seconds.
So how do we do this?
We start with the window that set time out.
Be careful with the capital T..
So what I like to do so I don't get confused on how to write this.
First, I open and close parentheses and add the semicolon.
So this is how is the syntax of calling any method.
So now inside here we need two arguments.
So the first argument is going to be the function that's going to be executed at the end.
So function open and close parentheses for the function arguments, if there are any, and open and
close curly braces, which is where we're going to place the code inside this function.
So we just write it like this so we don't get confused.
And then the second argument, comma, then it's going to be the time.
So if we want to delay three seconds, we have to write three thousand because this number is a millisecond.
So three seconds, it's the same as three thousand milliseconds.
All right.
So now let's go inside this function.
So as you can see, when you see the set time out method on the Internet, on some example out there,
you see it written like this.
But this could be a bit confusing if you're just starting out with this method.
So this is why I like to write it like this first so we can understand that this is the first argument,
which is the function.
This is the second argument.
So then when you get used to it, you know that inside here is just the content of that function inside
here.
I'm just going to send the second message.
So now I'm going to send a message number to.
Let's save this.
Now refreshing the page, we can see message one and after three seconds, we can see a message to.
Now, let's do another example, I have a spinner loader which is hidden here, if we go to the HTML
of this page, let's just click the button.
We can see that below this button there is an element of the idea of spinner loader that has a display
of none.
If I uncheck this box, we can see that it's just an element with some animation.
And what we're going to do is just showing this element for a given number of seconds, so this is going
to be pretty similar to what we've done here.
And what we're going to do is just showing this element for a given number of seconds or milliseconds.
And this is going to be pretty similar to what we've just done here.
But the difference is that we're going to click this button to fire this function.
So this button has the ID of Show Lowther.
Let's copy this.
Let's go back to Visual Studio Code, we can comment all this for now.
And now we are going to start.
Selecting that element.
Which has an idea of sort of show Lowther, and we are going to create an unclick event for it so that
unclick then there will be a function.
And now when we click this button, what we want to do is just selecting the spinner loader, so let's
go back there to see the ID again.
So the idea of this loader is Spiner Loader.
So we are just going to get this element and changed its display so we know we can use the style property
then the name of the property, which is display.
At the moment, we have it as non, so we are going to change it to block.
Let's just go back there to test this out, so if we change from non to block, we can see that we just
show the element.
So this is what we are going to do using JavaScript and then after we showed this element, we are just
going to delete three seconds before we hide it.
So we are going to start a set time out method.
So window, if you don't want to use the window, you know, you can omit the name of the object, I
just like using it.
So window that said time out.
So, again, open and close parentheses semicolon inside here, two arguments.
First one is the function.
Second one is the number of milliseconds, so let's show the slow there for, let's say, two seconds.
And now, after the two seconds have passed, what we need to do is just hiding it again.
So then we are going to change the display to none again.
Let's save this, refresh the page.
Nothing is happening.
I'm just going to click the button now.
We can see the loader and after two seconds, it's gone.
So this is used in many websites, maybe not for loaders, because loaders are just going to be hidden
when something finishes loading.
But I don't know if you've noticed on websites, sometimes there is an error message or some message
saying that the changes have been saved.
So you just see something coming from above.
We have a message and then after a few seconds, it just gets hidden, so it is done by using the set
time out.
So now let's see the other method I mentioned, which is the set intervals.
So this time it is going to be similar to the set time out.
But the difference is that it is going to keep repeating that function forever unless we stop it.
So let's see how this works.
Let's go to Visual Studio Code.
So before starting it, I'm just going to create a variable called count, which is going to be zero.
And I'm going to write window that set, so this time it's set interval and the same thing again.
First you open and close parentheses and add the semicolon inside here.
We need a function and the time.
So function open and close parentheses now the time.
So I'm just going to keep increasing the number.
So this is just going to work like a clock or just a counter that's going to be getting increased by
itself.
So for this, I'm going to use one second interval.
So every second what I'm going to do.
Is sending the number I have to the council and then incrementing one, so if I do this.
And refresh the page, let's go to the council.
As you can see, we have this thing that is just like seconds in a clock and this is going to be running
forever until we stop it.
So now how do we stop this?
If you go down here, you will see that we can interrupt time methods by using variables.
So going back to Visual Studio Code.
When we create the set interval method.
Instead of just doing it like this, we can assign into a variable, so I'm going to name this variable,
I don't know, time interval.
And I'm just going to do like this, so this is going to be executed anyway, but this time this is
going to be assigned to this variable and this is going to be important when we want to interrupt it.
So what we are going to do after doing the same thing we've just done, we are going to start an if
statement here because we just want to run this up to five.
So if the count.
Is greater than or equal to five.
We just want to interrupt this set interval.
So how do we do this?
We use another method called Clear.
Interval, as you can see, we have clear interval and clear time out.
So for this case, we just want to clear the interval.
And inside parentheses, we just need to pass the name of this variable.
So by doing this now, going back, they're refreshing the page, as you can see, we weren't on the
page and this just kept running.
This is just going to run forever.
Now, if we refresh the page, it is happening again.
So let's wait until it reaches five.
It didn't reach five.
It stopped at four, so as you can see, we just interrupted the set interval method and the same thing
can be done with the set time out by using the clear timeout.
So pretty cool.
That was all I wanted to show you about that time out in that interval for now.
But before we finish with this, I just left you another challenge.
So I want you to use the date object and the set interval method to make the watch below work in real
time.
So I have a watch here.
So here it's a space for the hours.
Let's see the sides of this.
So here we have.
And now for the hours, an element for the minutes and the element for the second.
So now you know how to get the actual time, the current time with the date object and you know how
to repeat a block of code using the set interval.
So I want you to get these two things we learned in this lesson and in the previous one and put this
clock to work.
So, again, take your time, try to think, how can you do this?
And in the next video, I'm going to be back here to solve this.
So good luck and I'll see you in the next video.