1
00:00:00,180 --> 00:00:06,960
Okay, So let's take a look at the vanilla jar set up in the index HTML.

2
00:00:07,320 --> 00:00:08,360
Surprise, surprise.

3
00:00:08,370 --> 00:00:13,650
I have a button with a class of BTN and I have text click me.

4
00:00:14,010 --> 00:00:21,500
And then as far as the logic, I select a button with a query selector, I add event listener.

5
00:00:21,510 --> 00:00:30,060
I'm listening for click events and then everytime the event fires off there's console.log you clicked

6
00:00:30,060 --> 00:00:30,450
me.

7
00:00:31,660 --> 00:00:33,350
Let me make this very clear.

8
00:00:33,370 --> 00:00:35,920
There's nothing tricky about this setup.

9
00:00:36,100 --> 00:00:41,980
There's probably the most straightforward button that you have seen in any of the tutorials.

10
00:00:42,220 --> 00:00:43,330
Here's the goal, though.

11
00:00:44,410 --> 00:00:50,110
We want to set up the delay logic where we run this functionality.

12
00:00:50,110 --> 00:00:56,080
In this case console.log you click me only 2 seconds after the last click.

13
00:00:56,910 --> 00:01:03,240
So let's say I clicked 20 times and only after that last click we set up that console.log.

14
00:01:03,920 --> 00:01:05,300
So that's the goal.

15
00:01:06,550 --> 00:01:08,950
How we can start moving in the right direction.

16
00:01:08,950 --> 00:01:12,210
Well, we could come up with a callback function, right?

17
00:01:12,220 --> 00:01:16,240
It's not going to be surprising if I'll call this the bounce.

18
00:01:16,540 --> 00:01:19,060
So say the bounce, That's my function.

19
00:01:19,060 --> 00:01:26,710
And in here I also right away can set up the set timeout that's in the API where we can use that timeout.

20
00:01:26,710 --> 00:01:31,600
We pass in a callback function and in how long the functionality is going to run.

21
00:01:31,600 --> 00:01:32,980
So let's write a way to do that.

22
00:01:33,280 --> 00:01:34,780
I'm going to go to timeout.

23
00:01:35,290 --> 00:01:36,700
Like I said, it's looking for two things.

24
00:01:36,700 --> 00:01:38,200
The callback function.

25
00:01:38,230 --> 00:01:42,640
In our case, that's going to be our console.log and then in how long it's going to run.

26
00:01:42,970 --> 00:01:46,270
So let's say in here I'm going to go with 2 seconds.

27
00:01:46,540 --> 00:01:49,150
The value is in the milliseconds.

28
00:01:49,150 --> 00:01:51,550
That's why we need to go with 2000.

29
00:01:51,850 --> 00:01:55,510
And let me grab this console.log, set it up over here.

30
00:01:55,750 --> 00:02:02,320
And then instead of anonymous callback function, we're going to go with the bounce and I save here.

31
00:02:02,920 --> 00:02:08,860
And some of the logic makes sense, but we're still not there yet.

32
00:02:08,860 --> 00:02:15,550
So yeah, things are happening with delay, but notice if I click seven times, pretty much I have seven

33
00:02:15,550 --> 00:02:16,620
control logs.

34
00:02:16,630 --> 00:02:18,370
And again, that's not our goal.

35
00:02:18,370 --> 00:02:23,050
I only want one log after my last click.

36
00:02:23,050 --> 00:02:30,130
And I'm sorry if I keep repeating this, but hopefully this will help you to kind of connect the dots

37
00:02:30,160 --> 00:02:35,440
of what we're trying to achieve over here in our job application.

38
00:02:35,800 --> 00:02:38,440
So what changes can we implement?

39
00:02:38,440 --> 00:02:47,410
Well, with timeout, we can return the ID, so every time we run set timeout we actually return ID.

40
00:02:48,130 --> 00:02:51,670
And we can use that ID to clear the time out.

41
00:02:52,800 --> 00:02:54,970
See we're moving in the right direction.

42
00:02:54,990 --> 00:02:56,480
You can already see that.

43
00:02:56,490 --> 00:03:02,640
Basically what we want to do is cancel that previous timeout on that last button.

44
00:03:02,640 --> 00:03:03,150
Click.

45
00:03:03,450 --> 00:03:05,440
So let's see how it works.

46
00:03:05,460 --> 00:03:08,940
First I'm going to go with const and then timeout.

47
00:03:09,650 --> 00:03:10,280
All righty.

48
00:03:10,310 --> 00:03:13,370
I'll set it equal to basically set the amount.

49
00:03:13,610 --> 00:03:17,420
You know, I can actually move this up, so let me set it here.

50
00:03:17,540 --> 00:03:19,400
That's equal to set timeout.

51
00:03:20,140 --> 00:03:21,970
That's the idea that we're getting back.

52
00:03:22,390 --> 00:03:25,630
If you want, we can log that sucker.

53
00:03:26,140 --> 00:03:31,930
So let's say here, time out I.D., and then let's clear it.

54
00:03:32,990 --> 00:03:33,850
Clear timeout.

55
00:03:33,860 --> 00:03:36,060
This is what we need to pass in timeout.

56
00:03:36,560 --> 00:03:39,020
And then lastly, let's just see that we have click the button.

57
00:03:39,020 --> 00:03:41,600
Otherwise you might be thinking, okay, he's just messing with me.

58
00:03:41,600 --> 00:03:43,340
He's actually not clicking the button.

59
00:03:43,550 --> 00:03:45,980
So let's go with Hello.

60
00:03:46,730 --> 00:03:47,360
So now what?

61
00:03:47,360 --> 00:03:54,200
You'll see we won't have any logs in a console that are coming from the set timeout because we will

62
00:03:54,200 --> 00:03:54,740
clear.

63
00:03:54,770 --> 00:03:56,990
However, we'll be still clicking the button.

64
00:03:57,290 --> 00:03:59,600
So notice I keep clicking.

65
00:03:59,600 --> 00:04:03,290
So these are those IDs, those timeout IDs.

66
00:04:03,290 --> 00:04:05,570
As you can see, it's increasing.

67
00:04:06,050 --> 00:04:12,260
So automatically JavaScript will start with, let's say zero or one, I don't remember.

68
00:04:12,260 --> 00:04:16,339
And then the number is going to keep on increasing so each and every time.

69
00:04:17,220 --> 00:04:19,540
We'll get a new ID now right away.

70
00:04:19,560 --> 00:04:21,130
Cancel it right away.

71
00:04:21,149 --> 00:04:22,170
Cancel that set time.

72
00:04:22,260 --> 00:04:23,880
That's why we don't see any.

73
00:04:23,910 --> 00:04:24,890
You clicked me.

74
00:04:24,900 --> 00:04:26,260
We just see the hello.

75
00:04:26,280 --> 00:04:28,290
Which means that we are clicking the button.

76
00:04:28,620 --> 00:04:31,950
But of course, we're cancelling right away this time out.

77
00:04:32,760 --> 00:04:37,070
So now let's put everything together and I'll throw you a grenade.

78
00:04:37,480 --> 00:04:42,870
See, what we could do with the bonds is actually return another function.

79
00:04:44,430 --> 00:04:48,360
Uh, in that function, we'll do two things.

80
00:04:48,600 --> 00:04:53,820
We'll clear out the previous timeout and we'll set up a new one.

81
00:04:54,860 --> 00:04:58,610
So let's start by just invoking the bounce.

82
00:04:58,610 --> 00:05:05,300
But when we need to keep in mind, since we evoke this immediately, basically when our application

83
00:05:05,300 --> 00:05:06,140
loads.

84
00:05:07,150 --> 00:05:09,940
We need to return from this bounce.

85
00:05:10,600 --> 00:05:11,590
A new function.

86
00:05:12,100 --> 00:05:13,690
Otherwise, none of this makes sense.

87
00:05:13,840 --> 00:05:15,470
Basically, we'll just run this code.

88
00:05:15,490 --> 00:05:15,940
That's it.

89
00:05:15,970 --> 00:05:16,990
We'll run it once.

90
00:05:17,020 --> 00:05:18,940
We'll just have one and all.

91
00:05:18,970 --> 00:05:19,630
That's it.

92
00:05:20,700 --> 00:05:24,150
Because again, now we're not invoking this on every click.

93
00:05:24,450 --> 00:05:25,980
We invoke this.

94
00:05:26,720 --> 00:05:30,560
Basically when the application loads so first.

95
00:05:31,420 --> 00:05:34,750
Let's go with the return and return to function.

96
00:05:34,960 --> 00:05:40,090
So now from the bounce, we return this function, and now this function will be invoked.

97
00:05:40,090 --> 00:05:44,560
So again, we come back to the same logic where we have those hellos and then we're clearing out the

98
00:05:44,560 --> 00:05:45,100
timeout.

99
00:05:45,850 --> 00:05:47,470
But here's what we want to do.

100
00:05:48,040 --> 00:05:49,660
I want to remove this.

101
00:05:49,720 --> 00:05:50,200
Well, you know what?

102
00:05:50,200 --> 00:05:51,400
I'll leave these ones out.

103
00:05:51,400 --> 00:05:58,960
Remove that halo over here, and we want to construct that time out ID the first time we run this the

104
00:05:58,960 --> 00:06:00,730
bounds on that initial.

105
00:06:01,540 --> 00:06:02,190
Load.

106
00:06:02,200 --> 00:06:05,230
So we're going to go here with timeout ID.

107
00:06:05,260 --> 00:06:11,130
However, I'm going to use LET since we'll update that in a second.

108
00:06:11,140 --> 00:06:13,180
So let me remove the const here.

109
00:06:14,040 --> 00:06:16,110
Let me set up tea time out here.

110
00:06:16,770 --> 00:06:17,230
Over here.

111
00:06:17,440 --> 00:06:17,910
So?

112
00:06:18,030 --> 00:06:21,990
So we create this new variable, and then what we're going to do.

113
00:06:22,750 --> 00:06:27,880
We'll clear out the previous timeout and we'll set up a new one.

114
00:06:28,030 --> 00:06:31,510
So let me move these two suckers up over here.

115
00:06:31,660 --> 00:06:39,030
So I have console.log time out already and then I'll set this one equal to the new timeout.

116
00:06:39,930 --> 00:06:42,180
So yes, there was a little bit of refactoring.

117
00:06:42,180 --> 00:06:44,760
So let me go over this code.

118
00:06:45,030 --> 00:06:51,240
So once the application loads, we run the bounce just one time we run it.

119
00:06:51,930 --> 00:06:53,730
We set up here this variable.

120
00:06:54,150 --> 00:06:54,830
Time out.

121
00:06:54,870 --> 00:06:55,390
Ready?

122
00:06:55,750 --> 00:07:01,580
And here I just have extra console.log where I basically say, okay, what is the value for timeout

123
00:07:01,590 --> 00:07:01,930
ID?

124
00:07:02,280 --> 00:07:03,930
The first thing we do.

125
00:07:04,550 --> 00:07:11,270
With this function that we return is clear out the previous one, whatever it was, and then we set

126
00:07:11,270 --> 00:07:12,290
up the new one.

127
00:07:13,570 --> 00:07:15,820
And we just come up with that set timeout.

128
00:07:15,910 --> 00:07:18,370
And what you'll notice as a result.

129
00:07:18,520 --> 00:07:21,280
Now, let's say if I click 20 times.

130
00:07:21,310 --> 00:07:25,780
Notice how the ID is changing, but only after the last one.

131
00:07:26,110 --> 00:07:26,830
I have this.

132
00:07:26,830 --> 00:07:28,420
You clicked me again.

133
00:07:28,420 --> 00:07:30,340
I invoked this one once.

134
00:07:30,370 --> 00:07:36,910
Once the application loads from that bounce, I return a new function and I set up the variable.

135
00:07:37,090 --> 00:07:42,700
And pretty much every time I'll click on a button, I'll clear out the previous one.

136
00:07:43,520 --> 00:07:44,990
And I'll set up the new one.

137
00:07:46,030 --> 00:07:53,110
And as long as those clicks are happening in those 2 seconds or whatever time we have over here in this

138
00:07:53,110 --> 00:07:58,300
time frame, we'll be clearing out the last one and then setting up the new one, clearing out the last

139
00:07:58,300 --> 00:07:59,440
one, setting up the new one.

140
00:07:59,440 --> 00:08:02,110
And I can click, I don't know, 10,000 times.

141
00:08:03,060 --> 00:08:08,970
And again, the log is going to happen only after the last click.

142
00:08:09,240 --> 00:08:11,010
And of course, we can make this.

143
00:08:12,210 --> 00:08:14,490
More dynamic, for example.

144
00:08:15,240 --> 00:08:18,670
I could set up the bounce to accept a function.

145
00:08:19,610 --> 00:08:21,290
And pass the logic in here.

146
00:08:21,320 --> 00:08:25,210
Also, as a side note, we can pass in in how long it's going to run as well.

147
00:08:25,220 --> 00:08:30,650
We can essentially set this one up as a variable, but I'm just going to go with this console.log or

148
00:08:30,650 --> 00:08:32,480
basically I'll remove it here.

149
00:08:32,480 --> 00:08:35,270
So now notice I'm passing this into the bounds.

150
00:08:35,690 --> 00:08:39,650
Then I'll set up as a function and invoke it over here.

151
00:08:39,650 --> 00:08:41,960
Like I said, we can make this more complex.

152
00:08:41,960 --> 00:08:44,780
That's really is not the point though here.

153
00:08:45,320 --> 00:08:50,600
Our main logic was to delay some functionality, which successfully we're doing.

154
00:08:50,780 --> 00:08:54,080
So let me click here and check it out.

155
00:08:54,080 --> 00:08:58,730
Now, of course, we wait for 2 seconds and after the last click.

156
00:08:59,840 --> 00:09:01,610
That's where we get the console log.

157
00:09:01,730 --> 00:09:04,640
And as you can see, this is what we'll do in our application.

158
00:09:05,180 --> 00:09:06,650
User is going to be typing.

159
00:09:07,400 --> 00:09:14,720
And after that last keystroke, that's when we all set up wheels in motion and we'll fetch that request.

160
00:09:15,110 --> 00:09:20,000
Because if you remember previously, when we were originally setting up the search, the problem was

161
00:09:20,000 --> 00:09:25,700
as we were typing, since we were updating that state variable, we were firing off those events, we

162
00:09:25,700 --> 00:09:27,110
were fetching for the data.

163
00:09:27,110 --> 00:09:30,680
And in order to avoid that, we kind of waited for is loading.

164
00:09:30,680 --> 00:09:32,840
So at the moment notice now I cannot type.

165
00:09:32,840 --> 00:09:36,610
I basically need to wait for that fetch request to complete.

166
00:09:36,620 --> 00:09:38,210
So now what we'll do?

167
00:09:39,160 --> 00:09:47,440
We all set up the functionality that delays that fresh request, but we're not going to be kind of restricting

168
00:09:47,440 --> 00:09:50,710
the user to wait for that fetch to complete.

169
00:09:50,920 --> 00:09:54,730
We'll just be waiting for the typing to be complete.