1
00:00:01,140 --> 00:00:05,850
The next problem that we're going to solve is making sure that we do not do an API request every single

2
00:00:05,850 --> 00:00:07,920
time the user changes that text input.

3
00:00:08,550 --> 00:00:12,210
It's entirely possible that a user is going to type in here very quickly.

4
00:00:13,150 --> 00:00:16,480
And so we would initiate an a tremendous number of requests right here.

5
00:00:16,540 --> 00:00:18,960
Way more than we need to make, though.

6
00:00:19,090 --> 00:00:23,530
Let's take a look at a couple of diagrams and understand how we're going to throttle somehow the number

7
00:00:23,530 --> 00:00:28,150
of requests that are being issued to, first off, a diagram of what is going on right now.

8
00:00:28,180 --> 00:00:30,160
Just we can understand some following diagrams.

9
00:00:30,190 --> 00:00:35,440
I'm going to show you right now we have this time axes starting up here at the very top and then going

10
00:00:35,440 --> 00:00:35,770
down.

11
00:00:36,490 --> 00:00:38,950
The user keeps on changing that text input.

12
00:00:39,370 --> 00:00:43,210
And every single time they initiate a change to it, we are immediately doing a search.

13
00:00:43,750 --> 00:00:46,960
So, again, this is currently what is happening and it's not what we want.

14
00:00:47,830 --> 00:00:51,370
Let's take a look at a diagram that's going to show you what we should probably tried to do.

15
00:00:52,270 --> 00:00:56,440
This is a little bit closer of what we really want to have happen inside of our app.

16
00:00:57,100 --> 00:01:02,640
We want to allow a user to type inside that input as much as they please whenever they type inside there.

17
00:01:02,680 --> 00:01:05,380
We are not going to medially do any kind of search.

18
00:01:05,980 --> 00:01:12,310
Instead, we're going to somehow wait for about five hundred milliseconds for the user to not do any

19
00:01:12,310 --> 00:01:13,540
additional input changes.

20
00:01:13,600 --> 00:01:18,760
So in other words, if they type a whole bunch and then stop for about five hundred milliseconds, then

21
00:01:18,760 --> 00:01:20,890
we will go ahead and do the actual search.

22
00:01:21,550 --> 00:01:27,070
And so, in a very practical sense, what that would look like is if I go programming and then wait

23
00:01:27,070 --> 00:01:31,600
five hundred milliseconds right there on the very end after I type that G right there, that very last

24
00:01:31,600 --> 00:01:32,020
character.

25
00:01:32,440 --> 00:01:35,590
That is when we would want to do one single search.

26
00:01:36,460 --> 00:01:37,030
That's the goal.

27
00:01:37,150 --> 00:01:38,510
That's what we would like to do.

28
00:01:39,500 --> 00:01:43,400
And just, you know, this 500 milliseconds on staying right here is totally arbitrary.

29
00:01:43,640 --> 00:01:47,530
This could be one hundred milliseconds or it can be one seconds.

30
00:01:49,090 --> 00:01:50,270
Or it can be five seconds.

31
00:01:50,330 --> 00:01:51,380
It doesn't make a difference.

32
00:01:51,950 --> 00:01:57,020
Five milliseconds just seems to be kind of a reasonable amount of time to wait to do a request or do

33
00:01:57,020 --> 00:01:57,680
that search.

34
00:01:58,520 --> 00:02:00,350
To how Quink somehow implement this?

35
00:02:00,590 --> 00:02:01,950
Well, naturally.

36
00:02:02,030 --> 00:02:07,670
Let's take a look at another diagram and get a better idea of how we can implement some control mechanism

37
00:02:07,910 --> 00:02:08,930
like what you see here.

38
00:02:10,200 --> 00:02:10,440
All right.

39
00:02:10,530 --> 00:02:11,280
So here's the idea.

40
00:02:12,030 --> 00:02:18,410
Whenever a user burse types inside that input, we are going to set up a timer using the set timeout

41
00:02:18,420 --> 00:02:20,490
function that is built into JavaScript.

42
00:02:21,540 --> 00:02:26,910
In that set timeout function, we are going to say in 500 seconds, go and run the search function with

43
00:02:26,910 --> 00:02:28,530
whatever the current term is.

44
00:02:29,250 --> 00:02:31,980
That's going to occur at the very first key press.

45
00:02:32,950 --> 00:02:38,680
If the user then immediately presses another character, we are then going to cancel the previous timer.

46
00:02:39,100 --> 00:02:43,000
They're going to say, all right, we line up that operation to do a search in five hundred milliseconds.

47
00:02:43,210 --> 00:02:45,070
But the user just pressed a character again.

48
00:02:45,130 --> 00:02:53,170
So let's go back and that last search timer and set up a new timer to do a search in five and hour milliseconds.

49
00:02:54,150 --> 00:03:00,360
So if we just stopped right there and we just considered those two steps 500 milliseconds after that

50
00:03:00,360 --> 00:03:03,140
second key press, we would execute our search.

51
00:03:04,950 --> 00:03:06,750
Let's imagine that this cycle keeps on going.

52
00:03:07,220 --> 00:03:09,270
So maybe the user type something into that input.

53
00:03:09,300 --> 00:03:10,170
A third time.

54
00:03:10,230 --> 00:03:15,150
Very quickly at that third time, we're going to once again cancel the previous timer that we set up

55
00:03:16,110 --> 00:03:19,380
and create a new timer to do search in another 500 milliseconds.

56
00:03:19,440 --> 00:03:25,050
And as you can see, that entire process is going repeat over and over and over again until the user

57
00:03:25,140 --> 00:03:27,840
goes for five milliseconds without typing anything in.

58
00:03:28,670 --> 00:03:33,510
And at that point time, we will execute the last set timeout that was created.

59
00:03:33,990 --> 00:03:36,240
That would be this one right here.

60
00:03:37,680 --> 00:03:38,550
That's the general idea.

61
00:03:38,700 --> 00:03:40,050
That's how we're going to approach this.

62
00:03:40,770 --> 00:03:45,610
Now, putting the code together for this is just going to be a little bit confusing just because some

63
00:03:45,620 --> 00:03:46,320
the syntax.

64
00:03:46,770 --> 00:03:50,220
But as we start to write the code, just think back to this diagram right here.

65
00:03:50,610 --> 00:03:55,200
If you understand this diagram, then you're going to understand the code that we are are about to write.

66
00:03:56,300 --> 00:04:00,650
All right, so now we've got kind of a theoretical idea of what we need to do here, going to come back

67
00:04:00,650 --> 00:04:03,980
in just a moment and start to write us some code to implement this system.