Hey, in this lesson, we are looking at JavaScript timers and what timers do is they allow you to run
a block of code when you want to run the block of code so you can set when that block of code gets run.
So there are set time out, which sets a timer which executes a function or specified piece of code
once the timer expires.
There's also interval also set interval, which is slightly different because this will repeatedly call
a function or a block of code with a fixed time delay between each call.
So it returns are interval ID, which can as well be tied back to it.
And you can remove it at a later point so you can set the time out.
And then you could also set the interval and then you could remove the interval when you want to remove
it.
And there's some examples here on what the difference between the two are.
So we've got different timers here.
So the time out, the interval and request animation frame, which we are also going to be looking at,
there's an example of setting the interval.
That's the one that we were looking at.
And this gives us the option to set that interval of code to run.
So you within the editor and we'll try these out in the first setting an interval ID and this is a window
object.
So grabbing it by the window and you don't always need to include the window, as you probably already
know from you, working with window objects.
So we've got a callback and we can run this at five hundred and then we can set send in a parameter
into that function, set up the callback function, take in the message.
So for this instance, it's going to show interval and we'll just cancel out the contents of message.
And then also let's set up another variable and this one is going to be for the timeout so we can see
the difference between the two and again window.
And we're setting a time out.
And this one is going to be different because this is going to execute callback.
And even though we're setting it to five hundred, it's going to continuously execute this Owusu at
the differences.
It's going to be very clear once we run this.
So once we see that, you can see that interval ran the first time, then set time out, ran and then
time out stopped.
So it only ran up the one time.
But you see, interval keeps going.
Stop the interval and you can do a clear interval and then you just need to specify interval.
As soon as we do clear interval, we see that the interval stops incrementing.
It's no longer running.
I'm going to create of a function here to stop the interval and it's just clear interval and then whatever
the interval is, that's going to clear that out.
So now we've got a function that we can run and we can stop the interval any time we want.
And all that does is clear the interval.
There's one other one that I want to show you, and this is one that I used quite a bit, I have to
admit, and this is request animation frame.
So what this does is it creates an animation frame, tells the browser that you wish to perform an animation
to create that animation before the next repaint.
A lot of times this will be used within canvas, but you can use outside a canvas as well where we've
got the request animation frame and they've got a nice example here where we're setting up the animation
frame, we're making the request to the animation frame, and then we're checking to see what the values
are.
And if progress is less than 2000, then we request the animation frame again step and that will run
this function over and over again until this is met.
And once progress is no longer less than two thousand, not, it's going to stop running.
So it's not going to run anymore.
Let me show you how this one works within the browser.
Set a variable value of X to zero and we need to select our element and using document query selector
selecting the div, I'm also going to apply some style properties to this div and also do a height and
a style of background color.
So it gives us that element that we can see it.
Now let's apply the animation frame, so create a function, call it step and then this function we're
going to increment X by one and then we're taking that element and applying a style property to it.
And the style property that we're applying is transform same translate X and the value of the translate
X will be whatever the value of X's and then break that back into the string, the selecting a string
value here and then adding in the condition while X is less than four fifty.
Then we're going to run this and then using window animation frame where we're going to call it to step
and then one last one to start this off.
So watch what happens to the red box.
Once I place this, we see that it's going to continue to move until the value of X is greater than
or equal to 450.
And once it is, then it's going to stop moving.
So it's all done through the success update we're using translate to move the element.
This is another way to use animation frame to create animations.
And you see it's a nice, smooth transition.
There is a challenge for you in this lesson, of course, and that's to create a countdown timer that
decreases by each second until it reaches zero output.
The value to an element to start out at 10 and it's going to decrease using the interval and then once
the value has decreased to zero, we're going to clear the interval and stop the countdown timer.
So go ahead and set this up and I'll walk you through it.
You can pause the video here and I'll walk you through the solution coming up.
Let's go ahead and walk through the solution where we've selected the element over here.
Are you going to just move this up to the top and reorder the coating so that we can use that same one
where we're selecting the element?
In this case, I'll use the value of Y.
So this is where our countdown is going to start the interval timer and set that up using the window
object and create a function called counter.
And we're going to run at every one hundred milliseconds and then we'll change it to a second afterwards.
So just as we're testing it out, so create the function and within the function we're taking the element
date it's text content to equal whatever the value of Y is tracked from Y got a condition.
Can you see if Y is less than zero and if it is then clear the interval and the interval is this one
here.
So we see the countdown went really quickly.
Update that.
Now the countdown is a little bit slower.
Of course we can update the size of the font more visible.
So let's update font size so that we can see our countdown.
We've got ten, nine, eight, seven, six, five, four, three, two, one.
And our countdown is complete.
Have some fun with it.
Try it out for yourself and we'll see in the next one.