1
00:00:00,510 --> 00:00:06,300
Hey, in this lesson, we are looking at JavaScript timers and what timers do is they allow you to run

2
00:00:06,300 --> 00:00:11,250
a block of code when you want to run the block of code so you can set when that block of code gets run.

3
00:00:11,460 --> 00:00:17,460
So there are set time out, which sets a timer which executes a function or specified piece of code

4
00:00:17,460 --> 00:00:19,080
once the timer expires.

5
00:00:19,350 --> 00:00:25,590
There's also interval also set interval, which is slightly different because this will repeatedly call

6
00:00:25,590 --> 00:00:30,330
a function or a block of code with a fixed time delay between each call.

7
00:00:30,510 --> 00:00:35,700
So it returns are interval ID, which can as well be tied back to it.

8
00:00:35,700 --> 00:00:39,210
And you can remove it at a later point so you can set the time out.

9
00:00:39,210 --> 00:00:43,380
And then you could also set the interval and then you could remove the interval when you want to remove

10
00:00:43,380 --> 00:00:43,530
it.

11
00:00:43,710 --> 00:00:47,570
And there's some examples here on what the difference between the two are.

12
00:00:47,940 --> 00:00:49,310
So we've got different timers here.

13
00:00:49,320 --> 00:00:54,090
So the time out, the interval and request animation frame, which we are also going to be looking at,

14
00:00:54,600 --> 00:00:57,150
there's an example of setting the interval.

15
00:00:57,420 --> 00:00:59,010
That's the one that we were looking at.

16
00:00:59,010 --> 00:01:02,760
And this gives us the option to set that interval of code to run.

17
00:01:02,910 --> 00:01:08,670
So you within the editor and we'll try these out in the first setting an interval ID and this is a window

18
00:01:08,670 --> 00:01:09,090
object.

19
00:01:09,090 --> 00:01:13,710
So grabbing it by the window and you don't always need to include the window, as you probably already

20
00:01:13,710 --> 00:01:15,750
know from you, working with window objects.

21
00:01:15,780 --> 00:01:23,310
So we've got a callback and we can run this at five hundred and then we can set send in a parameter

22
00:01:23,310 --> 00:01:28,480
into that function, set up the callback function, take in the message.

23
00:01:28,500 --> 00:01:34,640
So for this instance, it's going to show interval and we'll just cancel out the contents of message.

24
00:01:34,980 --> 00:01:40,800
And then also let's set up another variable and this one is going to be for the timeout so we can see

25
00:01:40,800 --> 00:01:43,020
the difference between the two and again window.

26
00:01:43,200 --> 00:01:44,660
And we're setting a time out.

27
00:01:44,670 --> 00:01:48,540
And this one is going to be different because this is going to execute callback.

28
00:01:48,840 --> 00:01:53,640
And even though we're setting it to five hundred, it's going to continuously execute this Owusu at

29
00:01:53,640 --> 00:01:54,240
the differences.

30
00:01:54,240 --> 00:01:55,920
It's going to be very clear once we run this.

31
00:01:55,950 --> 00:02:03,150
So once we see that, you can see that interval ran the first time, then set time out, ran and then

32
00:02:03,150 --> 00:02:04,470
time out stopped.

33
00:02:04,470 --> 00:02:06,060
So it only ran up the one time.

34
00:02:06,060 --> 00:02:07,650
But you see, interval keeps going.

35
00:02:07,920 --> 00:02:13,080
Stop the interval and you can do a clear interval and then you just need to specify interval.

36
00:02:13,380 --> 00:02:17,700
As soon as we do clear interval, we see that the interval stops incrementing.

37
00:02:17,880 --> 00:02:18,940
It's no longer running.

38
00:02:18,960 --> 00:02:25,380
I'm going to create of a function here to stop the interval and it's just clear interval and then whatever

39
00:02:25,380 --> 00:02:28,140
the interval is, that's going to clear that out.

40
00:02:28,170 --> 00:02:32,700
So now we've got a function that we can run and we can stop the interval any time we want.

41
00:02:32,700 --> 00:02:34,270
And all that does is clear the interval.

42
00:02:34,290 --> 00:02:38,730
There's one other one that I want to show you, and this is one that I used quite a bit, I have to

43
00:02:38,730 --> 00:02:41,250
admit, and this is request animation frame.

44
00:02:41,520 --> 00:02:47,790
So what this does is it creates an animation frame, tells the browser that you wish to perform an animation

45
00:02:48,060 --> 00:02:51,360
to create that animation before the next repaint.

46
00:02:51,750 --> 00:02:56,910
A lot of times this will be used within canvas, but you can use outside a canvas as well where we've

47
00:02:56,910 --> 00:03:02,250
got the request animation frame and they've got a nice example here where we're setting up the animation

48
00:03:02,250 --> 00:03:08,040
frame, we're making the request to the animation frame, and then we're checking to see what the values

49
00:03:08,040 --> 00:03:08,280
are.

50
00:03:08,460 --> 00:03:16,140
And if progress is less than 2000, then we request the animation frame again step and that will run

51
00:03:16,140 --> 00:03:19,800
this function over and over again until this is met.

52
00:03:19,980 --> 00:03:24,900
And once progress is no longer less than two thousand, not, it's going to stop running.

53
00:03:24,900 --> 00:03:26,010
So it's not going to run anymore.

54
00:03:26,190 --> 00:03:28,380
Let me show you how this one works within the browser.

55
00:03:28,810 --> 00:03:36,960
Set a variable value of X to zero and we need to select our element and using document query selector

56
00:03:36,960 --> 00:03:43,770
selecting the div, I'm also going to apply some style properties to this div and also do a height and

57
00:03:43,770 --> 00:03:45,510
a style of background color.

58
00:03:45,510 --> 00:03:47,420
So it gives us that element that we can see it.

59
00:03:47,430 --> 00:03:53,100
Now let's apply the animation frame, so create a function, call it step and then this function we're

60
00:03:53,100 --> 00:03:58,230
going to increment X by one and then we're taking that element and applying a style property to it.

61
00:03:58,410 --> 00:04:05,790
And the style property that we're applying is transform same translate X and the value of the translate

62
00:04:05,790 --> 00:04:12,390
X will be whatever the value of X's and then break that back into the string, the selecting a string

63
00:04:12,390 --> 00:04:17,070
value here and then adding in the condition while X is less than four fifty.

64
00:04:17,070 --> 00:04:22,890
Then we're going to run this and then using window animation frame where we're going to call it to step

65
00:04:23,070 --> 00:04:25,740
and then one last one to start this off.

66
00:04:26,250 --> 00:04:28,530
So watch what happens to the red box.

67
00:04:28,530 --> 00:04:34,860
Once I place this, we see that it's going to continue to move until the value of X is greater than

68
00:04:35,160 --> 00:04:36,450
or equal to 450.

69
00:04:36,720 --> 00:04:38,570
And once it is, then it's going to stop moving.

70
00:04:39,150 --> 00:04:44,220
So it's all done through the success update we're using translate to move the element.

71
00:04:44,330 --> 00:04:48,120
This is another way to use animation frame to create animations.

72
00:04:48,120 --> 00:04:50,100
And you see it's a nice, smooth transition.

73
00:04:50,130 --> 00:04:55,050
There is a challenge for you in this lesson, of course, and that's to create a countdown timer that

74
00:04:55,050 --> 00:04:59,640
decreases by each second until it reaches zero output.

75
00:04:59,770 --> 00:05:07,000
The value to an element to start out at 10 and it's going to decrease using the interval and then once

76
00:05:07,000 --> 00:05:12,940
the value has decreased to zero, we're going to clear the interval and stop the countdown timer.

77
00:05:13,240 --> 00:05:15,530
So go ahead and set this up and I'll walk you through it.

78
00:05:15,550 --> 00:05:18,880
You can pause the video here and I'll walk you through the solution coming up.

79
00:05:19,150 --> 00:05:24,220
Let's go ahead and walk through the solution where we've selected the element over here.

80
00:05:25,210 --> 00:05:31,660
Are you going to just move this up to the top and reorder the coating so that we can use that same one

81
00:05:31,660 --> 00:05:32,740
where we're selecting the element?

82
00:05:33,040 --> 00:05:35,780
In this case, I'll use the value of Y.

83
00:05:36,130 --> 00:05:42,160
So this is where our countdown is going to start the interval timer and set that up using the window

84
00:05:42,160 --> 00:05:44,620
object and create a function called counter.

85
00:05:44,650 --> 00:05:49,880
And we're going to run at every one hundred milliseconds and then we'll change it to a second afterwards.

86
00:05:49,880 --> 00:05:54,900
So just as we're testing it out, so create the function and within the function we're taking the element

87
00:05:54,910 --> 00:06:01,630
date it's text content to equal whatever the value of Y is tracked from Y got a condition.

88
00:06:01,630 --> 00:06:09,670
Can you see if Y is less than zero and if it is then clear the interval and the interval is this one

89
00:06:09,670 --> 00:06:09,880
here.

90
00:06:09,910 --> 00:06:11,890
So we see the countdown went really quickly.

91
00:06:11,950 --> 00:06:12,520
Update that.

92
00:06:12,730 --> 00:06:14,450
Now the countdown is a little bit slower.

93
00:06:14,470 --> 00:06:18,160
Of course we can update the size of the font more visible.

94
00:06:18,340 --> 00:06:21,220
So let's update font size so that we can see our countdown.

95
00:06:21,300 --> 00:06:30,280
We've got ten, nine, eight, seven, six, five, four, three, two, one.

96
00:06:30,280 --> 00:06:32,350
And our countdown is complete.

97
00:06:32,470 --> 00:06:33,240
Have some fun with it.

98
00:06:33,250 --> 00:06:36,010
Try it out for yourself and we'll see in the next one.